/* =========================================================
   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;
  /* minmax(0, ...): nome sem espaco (apelido colado, e-mail) quebra a linha em
     vez de empurrar a acao para fora e abrir rolagem lateral no cartao. */
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  overflow-wrap: anywhere;
  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; }
/* "Como funciona": abre o guia do PDV (ajuda/guias/pdv.js) no painel de
 * ajuda (data-ajuda, delegado em ui/ajudaPainel.js). Mesmo peso visual de
 * "Comandas abertas": e consulta, nao acao de venda. O icone fica sempre; o
 * rotulo some junto com o dele nas telas menores (o aria-label continua). */
.pdv-btn-ajuda > i { color: var(--color-primary); }
.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); }
/* ------------------------------------- Comandas (aba F7, PDV Fase 2)
   Visao ampla de todas as abertas. Mesma assinatura das mesas (fio de status
   a esquerda, cartao sem borda no claro) para o operador ler as duas abas do
   mesmo jeito; o que carrega o cartao e o VALOR EM ABERTO, grande, embaixo.
   O selo leva a palavra; o fio e a cor so reforcam. */
.pdv-contagem--aba { font-size: 11px; padding: 1px 7px; }
.pdv-quadro__filtros { display: grid; gap: var(--space-2); margin-bottom: var(--space-4); min-width: 0; }
.pdv-quadro__filtros .chip-cf i { font-size: 12px; }
.pdv-quadro__lista {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  gap: var(--space-3);
  align-content: start;
}
.pdv-quadro__lista > .empty-cf { grid-column: 1 / -1; }
.pdv-qd {
  --est: var(--color-success);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
  padding: var(--space-4) var(--space-4) var(--space-4) calc(var(--space-4) + 4px);
  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);
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.pdv-qd::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--est);
}
.pdv-qd.is-parcial { --est: var(--info); }
.pdv-qd.is-conta { --est: var(--justificada); }
.pdv-qd:hover { box-shadow: var(--shadow-card-hover); }
.pdv-qd:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--pitch-200); }
/* A comanda que esta no painel da direita: contorno na primaria + fundo
   suave, e aria-current no HTML (a marca nao e so cor). */
.pdv-qd.is-ativa {
  border-color: var(--color-primary);
  box-shadow: inset 0 0 0 1px var(--color-primary), var(--shadow-card);
  background: color-mix(in srgb, var(--color-primary-soft) 55%, var(--bg-surface));
}
.pdv-qd.is-ativa:focus-visible { box-shadow: inset 0 0 0 1px var(--color-primary), 0 0 0 3px var(--pitch-200); }
.pdv-qd__topo { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.pdv-qd__num { font-size: var(--text-lg); font-weight: var(--fw-bold); letter-spacing: -0.02em; }
.pdv-qd__tempo { font-size: var(--text-xs); color: var(--text-secondary); white-space: nowrap; }
.pdv-qd__nome {
  font-weight: var(--fw-semibold);
  line-height: 1.3;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pdv-qd .pdv-origem { min-width: 0; overflow-wrap: anywhere; }
.pdv-qd__base { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); }
.pdv-qd__base .pdv-estado { white-space: normal; }
.pdv-qd__itens { font-size: var(--text-xs); color: var(--text-secondary); white-space: nowrap; }
.pdv-qd__valor {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: auto;
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-color);
}
.pdv-qd__valor-num { font-size: var(--text-xl); font-weight: var(--fw-bold); letter-spacing: -0.02em; line-height: 1.1; }
.pdv-qd__valor-rot { font-size: var(--text-xs); color: var(--text-secondary); }
@media (max-width: 767px) {
  .pdv-visao { flex-wrap: wrap; }
  .pdv-quadro__lista { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
}

.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.is-liberado { --btn-fg: var(--text-primary); }
.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__contas { margin: 0; padding: var(--space-3) var(--space-4); border-radius: var(--radius-control); background: var(--bg-muted); }
.pdv-caixa-modal__contas > div { padding: var(--space-1) 0; }
.pdv-caixa-modal__contas dd { 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); }
/* Link discreto do caixa fechado: comprovante do ultimo caixa da pessoa. */
.pdv-caixa-modal__ultimo { justify-self: start; --btn-fg: var(--text-secondary); }
/* Fechamento cego (Fase 3): aviso de que nada e comparado antes de fechar. */
.pdv-caixa-modal__cego {
  display: flex; gap: var(--space-2); align-items: flex-start; margin: 0;
  font-size: var(--text-sm); line-height: 1.6; color: var(--text-secondary);
}
.pdv-caixa-modal__cego i { margin-top: 0.3em; color: var(--text-muted); }

/* Formulario cego: 4 campos em 2x2 no desktop, 1 coluna no celular. */
.pdv-fecha { gap: var(--space-4); }
.pdv-fecha__intro { margin: 0; font-size: var(--text-sm); line-height: 1.6; color: var(--text-secondary); }
.pdv-fecha__grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.pdv-fecha__campo { display: grid; gap: var(--space-1); align-content: start; }
/* Rotulo, campo e ajuda alinhados entre as colunas mesmo quando um rotulo
   quebra linha ("Dinheiro contado na gaveta"): cada campo ocupa 3 trilhas da grade. */
.pdv-fecha__grade > .pdv-fecha__campo { grid-row: span 3; grid-template-rows: subgrid; row-gap: var(--space-1); }
.pdv-fecha__campo .form-label { display: block; align-self: end; margin: 0; font-weight: var(--fw-semibold); line-height: 1.4; }
.pdv-fecha__campo .form-label i { color: var(--text-muted); width: 1.1em; margin-right: var(--space-1); text-align: center; }
.pdv-fecha__ajuda { font-size: var(--text-xs); line-height: 1.5; color: var(--text-muted); }
.pdv-caixa-modal .pdv-pag__erro:empty { display: none; }
@media (max-width: 575.98px) {
  .pdv-fecha__grade { grid-template-columns: 1fr; gap: var(--space-3); }
}

/* Confirmacao (Swal): os 4 valores digitados. */
.pdv-caixa-confirma { margin: 0 auto var(--space-3); max-width: 320px; text-align: left; }
.pdv-caixa-confirma > div { font-size: var(--text-md); padding: var(--space-1) 0; border-bottom: 1px solid var(--border-color); }
.pdv-caixa-confirma dd { color: var(--text-primary); font-weight: var(--fw-semibold); }
.pdv-caixa-confirma__nota { margin: 0; font-size: var(--text-sm); color: var(--text-secondary); }

/* Resultado do fechamento: cabecalho com icone em circulo + quadro. */
.pdv-caixa-modal__feito { display: flex; gap: var(--space-3); align-items: center; }
.pdv-caixa-modal__feito-ico {
  flex: none; display: inline-grid; place-items: center; width: 40px; height: 40px;
  border-radius: var(--radius-full); background: var(--color-primary-soft); color: var(--color-primary);
}
.pdv-caixa-modal__feito-tit { margin: 0; font-size: var(--text-md); font-weight: var(--fw-bold); color: var(--text-primary); letter-spacing: -0.01em; }
.pdv-conf { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.pdv-conf th, .pdv-conf td { padding: var(--space-3) var(--space-2); border-bottom: 1px solid var(--border-color); text-align: right; white-space: nowrap; }
.pdv-conf th:first-child { text-align: left; padding-left: 0; }
.pdv-conf th:last-child, .pdv-conf td:last-child { padding-right: 0; }
.pdv-conf thead th { font-size: var(--text-xs); font-weight: var(--fw-semibold); color: var(--text-secondary); padding-top: 0; }
.pdv-conf tbody th { font-weight: var(--fw-semibold); color: var(--text-primary); }
.pdv-conf tbody th i { width: 1.1em; margin-right: var(--space-1); color: var(--text-muted); text-align: center; }
.pdv-conf tbody td { color: var(--text-primary); }
.pdv-conf tbody tr:last-child > * { border-bottom: 0; }
/* Celular: cada forma vira um bloco — forma e resultado na 1a linha,
   esperado e informado (com o rotulo) na 2a. Nada rola de lado. */
@media (max-width: 575.98px) {
  .pdv-conf thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .pdv-conf tbody tr { display: grid; grid-template-columns: 1fr auto; gap: var(--space-1) var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--border-color); }
  .pdv-conf tbody tr:last-child { border-bottom: 0; }
  .pdv-conf tbody th, .pdv-conf tbody td { padding: 0; border: 0; }
  .pdv-conf tbody th { grid-column: 1; grid-row: 1; align-self: center; }
  .pdv-conf tbody td.pdv-conf__res { grid-column: 2; grid-row: 1; }
  .pdv-conf tbody td[data-rotulo] { grid-row: 2; text-align: left; font-size: var(--text-xs); color: var(--text-secondary); }
  .pdv-conf tbody td[data-rotulo]:nth-of-type(2) { grid-column: 2; text-align: right; }
  .pdv-conf tbody td[data-rotulo]::before { content: attr(data-rotulo) ': '; }
}
.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); }
/* Cartoes do "Nova venda": flex com quebra, nao grade de trilhas. Com os dois
   modulos sao 5 cartoes e a grade auto-fit deixava o 5o sozinho na 2a fileira
   com 1/4 da largura. Base = fracao da linha (4 por fileira; 3 quando ha 5
   cartoes, que fecham em 3+2) e o flex-grow estica quem sobra: nenhum cartao
   mais estreito que a fileira permite. Um modulo so (3 ou 4 cartoes) continua
   numa fileira cheia. Piso de 240px; -0.5px contra arredondamento. */
.pdv-nova { --pdv-nova-colunas: 4; display: flex; flex-wrap: wrap; gap: var(--space-4); }
.pdv-nova:has(> .pdv-nova__card:nth-child(5)) { --pdv-nova-colunas: 3; }
.pdv-nova > .pdv-nova__card {
  flex: 1 1 calc((100% - (var(--pdv-nova-colunas) - 1) * var(--space-4)) / var(--pdv-nova-colunas) - 0.5px);
  min-width: min(100%, 240px);
}
.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; }
  .pdv-btn-ajuda .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-btn-ajuda { min-width: 44px; min-height: 44px; padding-inline: var(--space-3); justify-content: center; }
  .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 > .pdv-nova__card { flex-basis: 100%; }
  .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; }
}

/* ------------------------------------- Auditoria do PDV (Fase 2, D5)
   Aba do Painel, so para o Responsavel. A faixa de periodo do topo sai de
   vista nesta aba: ela tem o periodo proprio, de ate 366 dias (o "Abrir PDV"
   da faixa continua no menu).
   A coluna que carrega a tela e o "Quando": a HORA com segundos em algarismo
   tabular, o dia por baixo em secundaria — e por ela que se le uma trilha. A
   referencia de comanda e um botao-pilula que filtra pela comanda. O detalhe
   quebra linha (e texto de log, pode ser longo e sem espaco). */
.pdvp-periodo.is-sem-periodo { display: none; }
.pdva-filtros { padding: var(--space-4) var(--space-5); margin-bottom: var(--space-4); }
.pdva-filtros__topo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); }
.pdva-nota { margin: 0; font-size: var(--text-sm); color: var(--text-secondary); max-width: 72ch; flex: 1 1 320px; }
.pdva-filtros__linha { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3); }
.pdva-filtros__periodo { display: flex; gap: var(--space-3); min-width: 0; }
.pdva-filtros__periodo input { min-width: 150px; }
.pdva-campo { display: flex; flex-direction: column; min-width: 0; flex: 0 1 220px; }
.pdva-campo--comanda { flex: 0 1 140px; }
.pdva-filtros__acoes { display: flex; gap: var(--space-2); }
.pdva-aviso { margin-bottom: var(--space-3); }
.pdva-aviso > div { display: flex; flex-direction: column; gap: 2px; }
.pdva-conta { margin: 0 0 var(--space-2); min-height: 1.25em; }

.pdva-mesa table.table-cf { min-width: 860px; }
.pdva-mesa .pdva-col-acao { width: 220px; }
.pdva-mesa .pdva-col-operador { width: 184px; }
.pdva-mesa .pdva-col-ref { width: 180px; }
.pdva-mesa .pdva-detalhes { width: auto; }
.pdva-mesa tbody td.pdva-quando { line-height: 1.2; white-space: normal; }
.pdva-quando__hora { display: block; font-weight: var(--fw-semibold); color: var(--text-primary); }
.pdva-quando__dia { display: block; font-size: var(--text-xs); color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.pdva-acao { font-weight: var(--fw-medium); }
.pdva-mesa tbody td.pdva-detalhes {
  white-space: normal;
  overflow-wrap: anywhere;
  font-size: var(--text-sm);
  line-height: 1.45;
  color: var(--text-secondary);
}
.pdva-ref {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  max-width: 100%;
  padding: 2px var(--space-2);
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  background: var(--color-primary-soft);
  color: var(--color-primary);
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.pdva-ref i { font-size: .75em; opacity: .8; }
.pdva-ref:hover { border-color: var(--color-primary); }
.pdva-ref:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.pdva-ref-texto { font-variant-numeric: tabular-nums; }
/* Cartao do celular: o detalhe ocupa a linha inteira e quebra. */
.pdva-cartao .record-card-cf__meta-row:has(.pdva-detalhes-cel) { grid-column: 1 / -1; }
.pdva-cartao .record-card-cf__meta-val:has(.pdva-detalhes-cel),
.pdva-cartao .record-card-cf__meta-val:has(.pdva-ref),
.pdva-cartao .record-card-cf__meta-val:has(.pdva-operador-cel) { overflow: visible; white-space: normal; }
.pdva-operador-cel { overflow-wrap: anywhere; }
.pdva-detalhes-cel { overflow-wrap: anywhere; font-weight: var(--fw-regular); color: var(--text-secondary); }
@media (max-width: 767px) {
  .pdva-filtros { padding: var(--space-4); }
  .pdva-filtros__periodo { flex: 1 1 100%; }
  .pdva-filtros__periodo .period-filter-cf { flex: 1 1 0; min-width: 0; }
  .pdva-filtros__periodo input { min-width: 0; width: 100%; }
  .pdva-campo, .pdva-campo--comanda { flex: 1 1 100%; }
  .pdva-filtros__acoes { flex: 1 1 100%; }
  .pdva-filtros__acoes .btn-cf { flex: 1 1 0; justify-content: center; }
  .pdva-filtros input, .pdva-filtros select { font-size: 16px; }
}
@media (hover: none) and (pointer: coarse) {
  .pdva-ref { min-height: 44px; padding-inline: var(--space-3); }
}

/* ------------------------------------- Caixas do PDV (Fase 3, D5)
   Aba do Painel, so para o Responsavel. Dois blocos com cabecalho de icone em
   circulo: "Caixas abertos agora" (cartoes; o numero que carrega o cartao e o
   dinheiro esperado AO VIVO, que so o Responsavel ve) e o historico (filtros,
   quebras do periodo e a tabela). Quebra: falta = perigo, sobra = aviso,
   sempre com a palavra e o icone do selo (quebraHtml, o mesmo do PDV). */
.pdvc-bloco { margin-bottom: var(--space-8); }
.pdvc-cab { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }
.pdvc-cab__ico {
  flex: none; display: inline-grid; place-items: center; width: 40px; height: 40px;
  border-radius: var(--radius-full); background: var(--color-primary-soft); color: var(--color-primary);
}
.pdvc-cab__tit { margin: 0; font-size: var(--text-md); font-weight: var(--fw-bold); color: var(--text-primary); letter-spacing: -0.01em; line-height: 1.2; }
.pdvc-cab__sub { margin: 2px 0 0; font-size: var(--text-sm); color: var(--text-secondary); line-height: 1.5; }

.pdvc-abertos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: var(--space-4); }
.pdvc-aberto {
  display: grid; gap: var(--space-4); padding: var(--space-5);
  border: 1px solid var(--card-border); border-radius: var(--radius-card);
  background: var(--bg-surface); box-shadow: var(--shadow-card);
}
.pdvc-aberto__topo { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.pdvc-aberto__ico {
  flex: none; display: inline-grid; place-items: center; width: 36px; height: 36px;
  border-radius: var(--radius-full); background: var(--bg-muted); color: var(--text-secondary); font-size: var(--text-sm);
}
.pdvc-aberto__quem { min-width: 0; flex: 1; }
.pdvc-aberto__nome { margin: 0; font-weight: var(--fw-semibold); color: var(--text-primary); overflow-wrap: anywhere; line-height: 1.3; }
.pdvc-aberto__desde { margin: 2px 0 0; font-size: var(--text-xs); color: var(--text-secondary); line-height: 1.5; }
.pdvc-aberto__estado { flex: none; align-self: flex-start; }
.pdvc-aberto__valores { margin: 0; display: grid; gap: var(--space-1); padding: var(--space-3) var(--space-4); border-radius: var(--radius-control); background: var(--bg-muted); }
.pdvc-aberto__valores > div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); font-size: var(--text-sm); color: var(--text-secondary); }
.pdvc-aberto__valores dd { margin: 0; color: var(--text-primary); font-weight: var(--fw-semibold); }
.pdvc-aberto__valores .is-destaque dd { font-size: var(--text-lg); font-weight: var(--fw-bold); letter-spacing: -0.02em; }
.pdvc-aberto__acoes { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: flex-end; }

.pdvc-filtros { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3); padding: var(--space-4) var(--space-5); margin-bottom: var(--space-4); }
.pdvc-filtros__periodo { display: flex; gap: var(--space-3); min-width: 0; }
.pdvc-filtros__periodo input { min-width: 150px; }
.pdvc-campo { display: flex; flex-direction: column; min-width: 0; flex: 0 1 220px; }
.pdvc-so-quebra { min-height: 34px; }
.pdvc-aviso { margin-bottom: var(--space-3); align-items: flex-start; }
.pdvc-aviso > div { display: flex; flex-direction: column; gap: 2px; }

.pdvc-quebras { padding: var(--space-5); margin-bottom: var(--space-4); }
.pdvc-quebras__tit { margin: 0 0 var(--space-4); font-size: var(--text-base); font-weight: var(--fw-bold); color: var(--text-primary); }
.pdvc-quebras__grade { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--space-5); align-items: start; }
.pdvc-metricas { margin-bottom: 0; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); }
/* Dentro do cartao de quebras os indicadores sao chapados (cartao dentro de
   cartao com sombra dupla nao le): fundo neutro, sem sombra. */
.pdvc-metricas .metric-cf { background: var(--bg-muted); box-shadow: none; border-color: transparent; }
/* Rotulo quebra linha em vez de virar reticencia ("Caixas no pe..."). */
.pdvc-metricas .metric-cf__label { white-space: normal; }
.pdvc-ops__tit { margin: 0 0 var(--space-2); font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--text-secondary); }
.pdvc-ops__lista { list-style: none; margin: 0; padding: 0; }
.pdvc-ops__item {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--space-3); align-items: center;
  padding: var(--space-2) 0; border-bottom: 1px solid var(--border-color);
}
.pdvc-ops__item:last-child { border-bottom: 0; }
.pdvc-ops__nome { font-weight: var(--fw-semibold); color: var(--text-primary); overflow-wrap: anywhere; font-size: var(--text-sm); }
.pdvc-ops__sessoes { grid-column: 1; font-size: var(--text-xs); color: var(--text-secondary); }
.pdvc-ops__quebra { grid-column: 2; grid-row: 1 / span 2; display: flex; flex-wrap: wrap; gap: var(--space-1); justify-content: flex-end; }

.pdvc-mesa table.table-cf { min-width: 900px; }
.pdvc-mesa .pdvc-col-id { width: 84px; }
.pdvc-mesa .pdvc-col-data { width: 150px; }
.pdvc-mesa tbody td { vertical-align: middle; }
.pdvc-mesa .pdvc-col-op { min-width: 200px; }
.pdvc-mesa tbody td.pdvc-col-op { white-space: normal; overflow-wrap: anywhere; }
.pdvc-mesa tbody td.pdvc-col-data { white-space: normal; }
.pdvc-mesa .pdvc-quando__quem { max-width: 200px; overflow-wrap: anywhere; }
.pdvc-num { font-weight: var(--fw-semibold); color: var(--text-primary); }
.pdvc-quando { display: block; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pdvc-quando__quem { display: block; font-size: var(--text-xs); color: var(--text-secondary); }
.pdvc-quebra { display: inline-flex; flex-wrap: wrap; gap: var(--space-1); }
.pdvc-reaberto { display: inline-flex; align-items: center; gap: 4px; margin-left: var(--space-1); font-size: var(--text-xs); color: var(--text-secondary); white-space: nowrap; }
.pdvc-cartao .record-card-cf__meta-val:has(.pdvc-quebra),
.pdvc-cartao .record-card-cf__meta-val:has(.pdvc-reaberto) { overflow: visible; white-space: normal; }

/* Detalhe da sessao (modal). */
.pdvc-det__cab { display: grid; gap: var(--space-3); }
.pdvc-det__cab > .pdv-estado { justify-self: start; }
.pdvc-det__quem { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.pdvc-det__quem dt { font-size: var(--text-xs); font-weight: var(--fw-regular); color: var(--text-secondary); }
.pdvc-det__quem dd { margin: 2px 0 0; font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--text-primary); overflow-wrap: anywhere; }
.pdvc-det__reab { margin-top: var(--space-4); align-items: flex-start; }
.pdvc-det__reab > i { margin-top: .2rem; }
.pdvc-det__reab > div { display: flex; flex-direction: column; gap: 2px; }
.pdvc-det__nota { display: flex; gap: var(--space-2); align-items: flex-start; margin: var(--space-2) 0 0; font-size: var(--text-sm); color: var(--text-secondary); line-height: 1.6; }
.pdvc-det__nota i { margin-top: 0.3em; color: var(--text-muted); }
.pdvc-det__formas dt i { width: 1.1em; margin-right: var(--space-1); color: var(--text-muted); text-align: center; }
.pdvc-det__movs { margin-top: var(--space-2); }
.pdvc-det__mov-quem { display: block; font-size: var(--text-xs); color: var(--text-secondary); }
.pdvc-det__obs { margin: 0; font-size: var(--text-sm); line-height: 1.6; color: var(--text-primary); overflow-wrap: anywhere; }
.pdvc-det__acoes { margin-top: var(--space-5); }
.pdvc-fechar__aviso { align-items: flex-start; line-height: 1.5; margin: 0; }
.pdvc-fechar__aviso > i { margin-top: .2rem; }

@media (max-width: 991.98px) {
  .pdvc-quebras__grade { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .pdvc-filtros { padding: var(--space-4); }
  .pdvc-filtros__periodo { flex: 1 1 100%; }
  .pdvc-filtros__periodo .period-filter-cf { flex: 1 1 0; min-width: 0; }
  .pdvc-filtros__periodo input { min-width: 0; width: 100%; }
  .pdvc-campo { flex: 1 1 100%; }
  .pdvc-filtros input, .pdvc-filtros select { font-size: 16px; }
  .pdvc-so-quebra { min-height: 44px; }
  .pdvc-aberto__acoes .btn-cf { flex: 1 1 0; justify-content: center; min-height: 44px; }
  .pdvc-det__quem { grid-template-columns: 1fr; }
  .pdvc-quebras { padding: var(--space-4); }
}

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

/* ===================================================================
   Acessos do PDV (PDV Fase 1, 2026-10-30) — pages/pdvAcessos.js
   O elemento que carrega a tela e a MATRIZ pessoa x acesso: cabecalho de
   coluna com o icone em circulo (o mesmo do indicador) e o que o grupo faz,
   interruptor centrado na celula. Linha alterada e ainda nao salva ganha a
   "linha de cal" a esquerda (a mesma marca do item ativo da sidebar) — o
   resto fica quieto. Tokens semanticos, os dois temas sem bloco proprio.
   =================================================================== */
.pa-whats-cf { padding: var(--space-6); }
.pa-whats-cf .section-head-cf__title { margin: 0; }
.pa-whats-cf__form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-3) var(--space-4);
}
.pa-whats-cf__campo { flex: 1 1 240px; max-width: 360px; min-width: 0; }
.pa-whats-cf__campo .form-control { font-size: 16px; }
.pa-whats-cf__atual {
  margin: var(--space-3) 0 0;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.5;
}

.pa-pessoas-head-cf { margin: 0 0 var(--space-4); }
.pa-pessoas-head-cf__titulo {
  font-size: var(--text-lg);
  font-weight: var(--fw-bold);
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin: 0 0 var(--space-1);
}
.pa-pessoas-head-cf__nota {
  max-width: 72ch;
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--text-secondary);
}

/* ---- Mesa (desktop) */
.pa-mesa-cf .table-cf th,
.pa-mesa-cf .table-cf td { vertical-align: middle; }
.pa-mesa-cf .table-cf thead th { vertical-align: top; padding-top: var(--space-4) !important; padding-bottom: var(--space-3) !important; }
.pa-pessoa-cf { min-width: 200px; }
/* .table-cf nao quebra linha: o rotulo do grupo e o nome ditavam a largura e a
   tabela passava 135 px do cartao a 1440 (medido no e2e). */
.pa-mesa-cf .table-cf th,
.pa-mesa-cf .table-cf td.pa-pessoa-cf { white-space: normal; }
.pa-pessoa-cf__wrap { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.pa-pessoa-cf__wrap .avatar-cf { flex: none; }
.pa-pessoa-cf__texto { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.pa-pessoa-cf__nome { font-weight: var(--fw-semibold); color: var(--text-primary); line-height: 1.25; }
.pa-pessoa-cf__sub {
  font-size: var(--text-xs);
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 220px;
}
.pa-pessoa-cf__selos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }

/* Sete interruptores (Fase 4 acrescentou "Estoque e compras"): 90 px por coluna, o rotulo quebra em duas linhas. */
.pa-col-chave-cf { text-align: center; min-width: 90px; width: 1%; padding-inline: var(--space-1) !important; }
.pa-th-cf { display: inline-flex; flex-direction: column; align-items: center; gap: 6px; max-width: 112px; }
.pa-th-cf__icone {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  background: var(--color-primary-soft);
  color: var(--color-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
}
.pa-th-cf__rotulo { font-weight: var(--fw-semibold); color: var(--text-primary); line-height: 1.25; font-size: 0.8125rem; text-wrap: balance; text-transform: none; letter-spacing: 0; }
.pa-th-cf__desc { font-size: var(--text-xs); font-weight: var(--fw-regular); color: var(--text-muted); line-height: 1.35; text-transform: none; letter-spacing: 0; white-space: normal; }
/* Abaixo de 1600 a descricao sai do cabecalho (fica no title): com ela as colunas
   empurravam Responsavel e Salvar para fora a 1440 (medido na foto). */
@media (max-width: 1599.98px) { .pa-th-cf__desc { display: none; } }

.pa-col-chave-cf .pa-chave-cf {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 44px;
  margin: 0;
  padding-left: 0;
}
.pa-col-chave-cf .pa-chave-cf .form-check-input { float: none; margin: 0; width: 2.4em; height: 1.35em; cursor: pointer; }
.pa-chave-cf .form-check-input:disabled { cursor: not-allowed; }
.pa-chave-cf__parcial {
  display: inline-block;
  padding: 1px 8px;
  border-radius: var(--radius-full);
  background: var(--bg-muted);
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: var(--fw-medium);
  line-height: 1.5;
  white-space: nowrap;
}
.pa-col-acao-cf { text-align: right; min-width: 132px; width: 1%; white-space: nowrap; }
.pa-proprio-cf {
  display: inline-flex;
  align-items: flex-start;
  gap: 6px;
  max-width: 200px;
  white-space: normal;
  text-align: left;
  font-size: var(--text-xs);
  line-height: 1.45;
  color: var(--text-secondary);
}
.pa-proprio-cf i { margin-top: 2px; color: var(--text-muted); }
.pa-linha-cf--alterada > td:first-child { box-shadow: inset 3px 0 0 var(--color-primary); }

/* ---- Cartao (celular): a lista de interruptores ocupa a largura toda do
   cartao, uma linha de 48px por acesso (alvo de toque inteiro no rotulo). */
.pa-cartao-cf .record-card-cf__meta-row:has(.pa-chaves-cf) { grid-column: 1 / -1; }
.pa-cartao-cf .record-card-cf__meta-val:has(.pa-chaves-cf) { overflow: visible; white-space: normal; font-weight: var(--fw-regular); }
.pa-cartao-cf--proprio .record-card-cf__foot { align-items: flex-start; flex-wrap: wrap; }
/* O aviso "É você" mora nas ações, que não encolhem (flex-shrink: 0): sem isto
   ele passava 6 px da tela a 390 e o documento rolava de lado (medido). */
.pa-cartao-cf--proprio .record-card-cf__actions { flex: 1 1 100%; min-width: 0; justify-content: flex-start; margin-left: 0; }
.pa-cartao-cf--proprio .pa-proprio-cf { max-width: none; }
.pa-chaves-cf { display: flex; flex-direction: column; }
.pa-chave-cf--linha {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 48px;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--border-color);
}
.pa-chave-cf--linha:first-child { border-top: 0; }
.pa-chave-cf__rotulo {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 48px;
  font-size: var(--text-base);
  color: var(--text-primary);
  cursor: pointer;
}
.pa-chave-cf__rotulo i { width: 18px; text-align: center; color: var(--color-primary); }
.pa-chave-cf--linha .form-check-input { order: 2; float: none; margin: 0; flex: none; width: 2.6em; height: 1.45em; cursor: pointer; }
.pa-chave-cf--linha .pa-chave-cf__parcial { order: 1; }

/* Sete colunas de interruptor + pessoa + Salvar so cabem ao lado da sidebar a
   partir de 1440 px (eram ~1400 com seis; o sétimo, "Estoque e compras", passou a pedir ~1078 px de tabela) (a 1280 a tabela rolava de lado e o Salvar ficava fora).
   Abaixo disso a tela usa os cartoes — em grade de duas colunas a partir de 641. */
@media (max-width: 1439.98px) {
  .pa-pessoas-cf .pa-mesa-cf { display: none; }
  .pa-pessoas-cf .records-mobile-cf { display: block; }
}
@media (min-width: 641px) and (max-width: 1439.98px) {
  .pa-pessoas-cf .record-list-cf { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); align-items: start; }
}