/* =========================================================
 * NelPDV - style.css
 * Tema: identidade Nelsys (índigo #283178 -> violeta #5a3890)
 * Tipografia: Archivo (títulos/valores), Inter (texto),
 * JetBrains Mono (números fiscais, cupom).
 * ========================================================= */

:root {
  --nel-900: #1b2158;
  --nel-800: #283178;   /* âncora da marca */
  --nel-700: #3a3a8c;
  --nel-600: #5a3890;   /* âncora da marca */
  --nel-100: #eceefb;
  --nel-grad: linear-gradient(135deg, #283178 0%, #5a3890 100%);
  --ink: #22243a;
  --papel: #f4f5fa;
  --ok: #1a7f4e;
  --alerta: #b3261e;
  --ambar: #9a6b00;
  --borda: #dcdfee;
  --sombra: 0 2px 10px rgba(40, 49, 120, .10);
  --footer-h: 44px;
  --fonte-display: 'Archivo', system-ui, sans-serif;
  --fonte-texto: 'Inter', system-ui, sans-serif;
  --fonte-mono: 'JetBrains Mono', 'Consolas', monospace;
}

html, body { height: 100%; }
body {
  font-family: var(--fonte-texto);
  background: var(--papel);
  color: var(--ink);
  font-size: 14px;
}
h1, h2, h3, h4, h5, .display-valor { font-family: var(--fonte-display); }

/* ---------- Layout de tela cheia ----------
 * O PDV ocupa exatamente a altura do monitor: header e rodapé fixos,
 * e o miolo distribui o que sobra. Nada de scroll na página — só a
 * lista de itens rola. Assim o painel de totais e o FINALIZAR ficam
 * sempre visíveis, em qualquer resolução.
 * 100dvh em vez de 100vh por causa da barra dinâmica em mobile. */
html, body { height: 100%; }
body {
  min-height: 100dvh;
  display: flex; flex-direction: column;
  overflow: hidden;
}

/* ---------- Páginas SPA ---------- */
.pagina { display: none; flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.pagina.ativa { display: block; }
/* O PDV não rola: seu conteúdo é dimensionado para caber. */
#pg-pdv.ativa { display: flex; flex-direction: column; overflow: hidden; }

/* ---------- Header ---------- */
.pdv-header {
  background: var(--nel-grad);
  color: #fff;
  padding: .5rem 1rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  box-shadow: var(--sombra);
  flex: 0 0 auto; z-index: 1030;
}
.pdv-header .marca {
  font-family: var(--fonte-display);
  font-weight: 800; font-size: 1.25rem; letter-spacing: .5px;
  display: flex; align-items: center; gap: .55rem;
}
/* Logo Web Easy ERP: o PNG é um círculo com o mesmo gradiente do header,
   então recebe um anel branco para não se dissolver no fundo. */
.pdv-header .marca-logo {
  height: 34px; width: 34px; border-radius: 50%;
  background: #fff; padding: 1px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.5);
}
.pdv-header .marca-txt { line-height: 1; white-space: nowrap; }
.pdv-header .marca-mod { font-weight: 500; opacity: .75; }
.pdv-header .marca .tag {
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.35);
  border-radius: .35rem;
  padding: .05rem .45rem;
  font-size: .7rem; font-weight: 600; letter-spacing: 1px;
}
.pdv-header .info { font-size: .8rem; opacity: .92; line-height: 1.25; }
.pdv-header .relogio {
  font-family: var(--fonte-mono);
  font-size: .95rem;
  background: rgba(0,0,0,.18);
  padding: .25rem .6rem; border-radius: .4rem;
}
.badge-caixa { font-size: .72rem; }
/* Contador de vendas paradas sobre o botão do header. */
.badge-interrompidas {
  position: absolute; top: -5px; right: -5px;
  background: var(--ambar); color: #fff;
  border-radius: 999px; padding: 0 .3rem;
  font-size: .62rem; font-weight: 700; line-height: 1.3;
  border: 1px solid rgba(255,255,255,.6);
}

/* ---------- Login ---------- */
#pg-login {
  background: var(--nel-grad);
  display: none;
  align-items: center; justify-content: center;
}
#pg-login.ativa { display: flex; }
.card-login {
  width: 380px; max-width: 92vw;
  border: 0; border-radius: 1rem;
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
}
.card-login .logo-login-img {
  height: 72px; width: 72px; margin-bottom: .5rem;
  filter: drop-shadow(0 4px 12px rgba(40, 49, 120, .28));
}
.card-login .logo-login {
  font-family: var(--fonte-display); font-weight: 800; font-size: 1.9rem;
  background: var(--nel-grad);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  line-height: 1.1;
}
.card-login .logo-login-mod {
  font-family: var(--fonte-display); font-weight: 600;
  font-size: .8rem; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--nel-600); opacity: .8; margin-bottom: .35rem;
}

/* ---------- Layout do PDV ---------- */
.pdv-corpo {
  display: flex; gap: 1rem; padding: .75rem; align-items: stretch;
  flex: 1 1 auto; min-height: 0;   /* min-height:0 deixa os filhos encolherem */
}
.pdv-esq {
  flex: 1 1 auto; min-width: 0; min-height: 0;
  display: flex; flex-direction: column; gap: .6rem;
}
.pdv-dir {
  flex: 0 0 380px; min-height: 0;
  display: flex; flex-direction: column; gap: .6rem;
}
/* O card da grade de itens absorve a sobra vertical. */
/* O card da tabela é quem estica e rola por dentro; o visor do último item
   fica fixo abaixo dele. Seletor por classe, não :last-child — o visor
   entrou depois da tabela e roubaria a regra. */
.pdv-esq > .card-itens { flex: 1 1 auto; min-height: 0; display: flex; }
.pdv-esq > .ultimo-item { flex: 0 0 auto; }
/* A grade de funções absorve a sobra e rola só se a tela for muito baixa. */
.pdv-dir > .card-pdv:last-child { flex: 1 1 auto; min-height: 0; overflow: auto; }

.card-pdv {
  background: #fff; border: 1px solid var(--borda);
  border-radius: .75rem; box-shadow: var(--sombra);
}
.card-pdv .card-header {
  background: transparent; border-bottom: 1px solid var(--borda);
  font-weight: 600; font-size: .8rem; letter-spacing: .6px;
  text-transform: uppercase; color: var(--nel-800);
}

/* Entrada de código */
#in-codigo {
  font-family: var(--fonte-mono); font-size: 1.35rem;
  border: 2px solid var(--nel-800); border-radius: .6rem;
}
#in-codigo:focus { box-shadow: 0 0 0 .25rem rgba(90, 56, 144, .2); border-color: var(--nel-600); }

/* Tabela de itens */
/* Preenche o card pai (que já é flex) em vez de calcular contra a viewport. */
.tabela-scroll { flex: 1 1 auto; min-height: 0; width: 100%; overflow: auto; }
#tabela-itens { margin: 0; }
#tabela-itens th {
  position: sticky; top: 0; background: var(--nel-100); z-index: 2;
  font-size: .72rem; text-transform: uppercase; letter-spacing: .5px;
  color: var(--nel-800);
}
#tabela-itens td { vertical-align: middle; font-size: .88rem; }
#tabela-itens .num { font-family: var(--fonte-mono); text-align: right; white-space: nowrap; }
#tabela-itens tr.item-cancelado td { text-decoration: line-through; opacity: .45; }
/* EAN é o código principal; o interno fica como apoio, menor. */
#tabela-itens .col-ean { line-height: 1.2; }
#tabela-itens .cod-interno { font-size: .64rem; color: #8a8fa3; }
/* Linhas de ajuste de quantidade: subordinadas ao item, nunca confundidas
   com um item novo — fonte menor, recuadas e sem número de sequência. */
#tabela-itens tr.linha-ajuste td {
  font-size: .72rem; padding-top: .1rem; padding-bottom: .1rem;
  border-top: 0; font-weight: 600; letter-spacing: .3px;
}
#tabela-itens tr.ajuste-cancel td { color: var(--alerta); background: #fdf2f1; }
#tabela-itens tr.ajuste-add td { color: var(--ok); background: #f1f8f4; }
#tabela-itens tr.linha-ajuste .ajuste-det {
  font-family: var(--fonte-mono); font-weight: 400; opacity: .8;
}
#tabela-itens tr.item-sel { outline: 2px solid var(--nel-600); outline-offset: -2px; background: var(--nel-100); }
.badge-promo { background: var(--ambar); font-size: .62rem; }
.badge-desc  { background: var(--ok); font-size: .62rem; }

/* Painel de totais — elemento assinatura */
.painel-total {
  background: var(--nel-grad); color: #fff;
  border-radius: .75rem; padding: .8rem 1.1rem;
  box-shadow: 0 10px 30px rgba(40,49,120,.35);
  flex: 0 0 auto;
}
.painel-total .rotulo { font-size: .72rem; letter-spacing: 1.5px; opacity: .85; }
/* Escala pela menor dimensão da tela: em monitor baixo o valor encolhe
   junto, em vez de empurrar o resto da coluna para fora. */
.painel-total .display-valor {
  font-size: clamp(1.75rem, 4.5vmin, 3rem); font-weight: 800; line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.painel-total .sub {
  display: flex; justify-content: space-between;
  font-size: .82rem; opacity: .92; padding-top: .15rem;
  font-variant-numeric: tabular-nums;
}
.painel-total .sub.destaque { color: #ffd8a8; font-weight: 600; }

/* Cliente */
.chip-cliente {
  display: flex; align-items: center; gap: .6rem;
  padding: .55rem .8rem; font-size: .85rem;
  flex: 0 0 auto;
}
.chip-cliente i { font-size: 1.3rem; color: var(--nel-600); }

/* Botões de função */
.grid-funcoes { display: grid; grid-template-columns: repeat(2, 1fr); gap: .4rem; }
.btn-funcao {
  display: flex; flex-direction: column; align-items: flex-start;
  border: 1px solid var(--borda); border-radius: .6rem;
  background: #fff; padding: .4rem .6rem; text-align: left;
  transition: all .12s ease; min-height: 48px;
}
.btn-funcao:hover:not(:disabled) { border-color: var(--nel-600); background: var(--nel-100); }
.btn-funcao:disabled { opacity: .45; }
.btn-funcao .tecla {
  font-family: var(--fonte-mono); font-size: .68rem; font-weight: 700;
  color: #fff; background: var(--nel-800);
  border-radius: .3rem; padding: 0 .35rem; margin-bottom: .2rem;
}
.btn-funcao .rot { font-size: .8rem; font-weight: 600; color: var(--ink); }
.btn-funcao.perigo .tecla { background: var(--alerta); }
.btn-funcao.destaque { background: var(--nel-grad); border: 0; }
.btn-funcao.destaque .rot { color: #fff; }
.btn-funcao.destaque .tecla { background: rgba(0,0,0,.25); }

/* ---------- Finalização ---------- */
.forma-pag {
  border: 2px solid var(--borda); border-radius: .75rem;
  padding: 1rem; cursor: pointer; background: #fff;
  text-align: center; transition: all .12s ease; width: 100%;
}
.forma-pag i { font-size: 1.8rem; color: var(--nel-600); }
.forma-pag:hover, .forma-pag:focus-visible { border-color: var(--nel-600); }
.forma-pag .fp-tecla {
  font-family: var(--fonte-mono); font-size: .68rem;
  background: var(--nel-100); color: var(--nel-800);
  border-radius: .3rem; padding: 0 .3rem;
}
/* Forma escolhida fica evidente: sem isso o operador não sabe onde o valor
   digitado vai cair. */
.forma-pag.forma-sel {
  border-color: var(--nel-600); background: var(--nel-100);
  box-shadow: 0 0 0 .2rem rgba(90, 56, 144, .18);
}
.forma-pag.forma-sel .fp-tecla { background: var(--nel-600); color: #fff; }
.pag-parcelas {
  font-size: .72rem; color: var(--nel-600); font-weight: 600;
}
#lista-pagamentos .pag-linha {
  display: flex; justify-content: space-between; align-items: center;
  padding: .45rem .6rem; border: 1px solid var(--borda);
  border-radius: .5rem; margin-bottom: .4rem; font-size: .9rem;
  font-variant-numeric: tabular-nums;
}
.resumo-fin {
  font-family: var(--fonte-mono); font-size: 1rem;
}
.resumo-fin .linha { display: flex; justify-content: space-between; padding: .15rem 0; }
.resumo-fin .grande { font-size: 1.6rem; font-weight: 700; }
.resumo-fin .falta { color: var(--alerta); }
.resumo-fin .troco { color: var(--ok); }

/* ---------- Cupom fiscal (bobina) ---------- */
.cupom-wrap { display: flex; justify-content: center; padding: 1rem; }
.cupom-fiscal {
  width: 340px; max-width: 100%;
  background: #fffef8;
  font-family: var(--fonte-mono);
  font-size: 11.5px; line-height: 1.45; color: #111;
  padding: 16px 14px 26px;
  box-shadow: 0 4px 18px rgba(0,0,0,.18);
  /* serrilhado da bobina na borda inferior */
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px),
    97.5% 100%, 95% calc(100% - 8px), 92.5% 100%, 90% calc(100% - 8px),
    87.5% 100%, 85% calc(100% - 8px), 82.5% 100%, 80% calc(100% - 8px),
    77.5% 100%, 75% calc(100% - 8px), 72.5% 100%, 70% calc(100% - 8px),
    67.5% 100%, 65% calc(100% - 8px), 62.5% 100%, 60% calc(100% - 8px),
    57.5% 100%, 55% calc(100% - 8px), 52.5% 100%, 50% calc(100% - 8px),
    47.5% 100%, 45% calc(100% - 8px), 42.5% 100%, 40% calc(100% - 8px),
    37.5% 100%, 35% calc(100% - 8px), 32.5% 100%, 30% calc(100% - 8px),
    27.5% 100%, 25% calc(100% - 8px), 22.5% 100%, 20% calc(100% - 8px),
    17.5% 100%, 15% calc(100% - 8px), 12.5% 100%, 10% calc(100% - 8px),
    7.5% 100%, 5% calc(100% - 8px), 2.5% 100%, 0 calc(100% - 8px));
}
.cf-center { text-align: center; }
.cf-bold { font-weight: 700; }
.cf-hr { border: 0; border-top: 1px dashed #555; margin: 6px 0; }
.cf-alerta { color: #b3261e; font-weight: 700; font-size: 10px; }
.cf-linha { display: flex; justify-content: space-between; gap: 8px; }
.cf-total { font-size: 14px; }
.cf-itens { width: 100%; border-collapse: collapse; }
.cf-itens th, .cf-itens td { padding: 1px 2px; font-size: 10.5px; text-align: left; }
.cf-itens .tr { text-align: right; white-space: nowrap; }
.cf-itens .cf-sub td { font-size: 10px; color: #444; }
/* Itens cancelados e ajustes de quantidade permanecem impressos: o cupom
   fiscal é um registro sequencial, não um resumo do resultado final. */
.cf-itens .cf-item-cancelado td { text-decoration: line-through; color: #777; }
.cf-itens .cf-ajuste td { font-size: 9.5px; color: #333; font-weight: 700; }
.cf-itens .cf-cancelado-msg td {
  font-size: 9.5px; font-weight: 700; color: #b3261e; text-align: center;
}
.cf-promo { color: #9a6b00; font-weight: 700; font-size: 9px; }
.cf-parcela { font-size: 9.5px; color: #444; padding-left: 8px; }
.cf-chave { font-size: 9.5px; word-break: break-all; margin: 4px 0; }
.cf-qr { margin: 8px 0; }
.qr-mock { image-rendering: pixelated; }

/* ---------- Formas de pagamento ----------
 * 5 na mesma linha: as 4 manuais mais o Cartão/TEF integrado. */
.grid-formas {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: .5rem;
}
.grid-formas .forma-pag { padding: .7rem .3rem; font-size: .82rem; }
.grid-formas .forma-pag i { font-size: 1.5rem; }
.forma-pag.forma-tef {
  border-color: var(--nel-600); border-width: 2px;
  background: linear-gradient(180deg, #fff 0%, var(--nel-100) 100%);
}
.forma-pag.forma-tef small {
  font-size: .58rem; letter-spacing: 1px; font-weight: 700;
  color: var(--nel-600); line-height: 1;
}
@media (max-width: 767.98px) {
  .grid-formas { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- Terminal TEF (pinpad simulado) ----------
 * Visual de terminal: fundo escuro, texto em caixa alta e monoespaçado,
 * como a telinha da maquininha. */
.tef-pinpad {
  background: #10131f; color: #e8eaf6; border: 0;
  border-radius: 1rem; overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.tef-topo {
  background: #0a0d16; color: #8b93c7;
  font-family: var(--fonte-mono); font-size: .7rem; letter-spacing: 1.5px;
  padding: .5rem .8rem; border-bottom: 1px solid #232842;
  display: flex; align-items: center;
}
.tef-sim {
  margin-left: auto; background: var(--ambar); color: #000;
  border-radius: .25rem; padding: 0 .35rem; font-size: .58rem; font-weight: 700;
}
#tef-corpo {
  font-family: var(--fonte-mono); text-align: center;
  padding: 1.2rem 1rem; min-height: 230px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.tef-valor {
  font-family: var(--fonte-display); font-size: 1.9rem; font-weight: 800;
  color: #7ee0a8; margin-bottom: .5rem; letter-spacing: 1px;
}
.tef-trilha { display: flex; gap: .3rem; margin-bottom: 1rem; }
.tef-passo {
  width: 26px; height: 3px; border-radius: 2px; background: #2a3050;
}
.tef-passo.feito { background: #4a5486; }
.tef-passo.ativo { background: #7ee0a8; }
.tef-icone { font-size: 2.8rem; color: #8b93c7; margin-bottom: .5rem; }
.tef-icone.pulsando { animation: tefPulso 1.4s ease-in-out infinite; }
@keyframes tefPulso { 0%,100% { opacity: .45; } 50% { opacity: 1; } }
.tef-msg {
  font-size: .88rem; letter-spacing: 1px; font-weight: 700; line-height: 1.35;
}
.tef-dica { font-size: .66rem; color: #6d75a8; margin-top: .6rem; line-height: 1.5; }
.tef-senha { font-size: 1.6rem; letter-spacing: .5rem; color: #7ee0a8; margin: .5rem 0; }
.tef-lista { width: 100%; margin-top: .7rem; display: flex; flex-direction: column; gap: .3rem; }
.tef-opcao {
  display: flex; align-items: center; gap: .1rem; cursor: pointer;
  background: #1a1f36; border: 1px solid #2a3050; border-radius: .4rem;
  padding: .5rem .7rem; font-size: .78rem; letter-spacing: .5px;
  text-align: left; transition: background .1s ease;
}
.tef-opcao.sel {
  background: var(--nel-600); border-color: #9d7ee0; color: #fff;
  box-shadow: 0 0 0 2px rgba(157,126,224,.3);
}
.tef-num {
  background: #2a3050; color: #8b93c7; border-radius: .2rem;
  font-size: .62rem; padding: 0 .3rem; margin-right: .5rem; min-width: 16px;
}
.tef-opcao.sel .tef-num { background: rgba(0,0,0,.3); color: #fff; }
.tef-spinner {
  width: 42px; height: 42px; border-radius: 50%;
  border: 3px solid #2a3050; border-top-color: #7ee0a8;
  animation: tefGira .8s linear infinite; margin-bottom: .7rem;
}
@keyframes tefGira { to { transform: rotate(360deg); } }
.tef-ok { color: #7ee0a8 !important; }
.tef-erro { color: #ff8a80 !important; }
.tef-comprovante {
  font-size: .68rem; color: #a8afd8; line-height: 1.6; margin-top: .6rem;
  background: #1a1f36; border-radius: .4rem; padding: .5rem .7rem; width: 100%;
}
.tef-mock {
  margin-top: .9rem; font-size: .66rem; color: #c9cff0;
  background: #241a2e; border: 1px dashed #6d4a8a; border-radius: .4rem;
  padding: .5rem .6rem; width: 100%;
}
.tef-mock-titulo {
  color: var(--ambar); font-weight: 700; letter-spacing: 1px;
  font-size: .58rem; margin-bottom: .25rem;
}
.tef-rodape {
  background: #0a0d16; color: #6d75a8; text-align: center;
  font-size: .64rem; padding: .4rem; border-top: 1px solid #232842;
}
.tef-pinpad .doc-atalho {
  background: #2a3050; color: #c9cff0; border-color: #3a4270;
}

/* ---------- Relatório de fechamento ----------
 * Formato de bobina, como sai da impressora térmica do caixa. */
.rel-fechamento {
  background: #fff; color: #111;
  font-family: var(--fonte-mono); font-size: 12px; line-height: 1.5;
  max-width: 420px; margin: 0 auto; padding: 18px 16px 24px;
  border: 1px solid var(--borda); border-radius: .5rem;
  box-shadow: 0 4px 18px rgba(0,0,0,.10);
}
.rel-cabecalho { text-align: center; border-bottom: 2px dashed #999; padding-bottom: .6rem; margin-bottom: .7rem; }
.rel-tipo {
  font-family: var(--fonte-display); font-weight: 800; font-size: .74rem;
  letter-spacing: 1.5px; color: #fff; background: var(--nel-800);
  display: inline-block; padding: .15rem .6rem; border-radius: .3rem; margin-bottom: .35rem;
}
.rel-titulo { font-family: var(--fonte-display); font-weight: 800; font-size: 1.1rem; }
.rel-sub { font-size: 10.5px; color: #555; line-height: 1.4; }
.rel-secao { margin-bottom: .9rem; }
.rel-secao h6 {
  font-family: var(--fonte-display); font-size: .72rem; text-transform: uppercase;
  letter-spacing: 1px; color: var(--nel-800); margin: 0 0 .3rem;
  border-bottom: 1px solid #ddd; padding-bottom: .15rem;
}
.rel-linha {
  display: flex; justify-content: space-between; gap: .6rem;
  font-variant-numeric: tabular-nums; padding: .06rem 0;
}
.rel-linha.destaque { border-top: 1px solid #bbb; margin-top: .2rem; padding-top: .25rem; font-size: 13px; }
.rel-linha.alerta { color: var(--alerta); }
.rel-linha.ok { color: var(--ok); font-weight: 700; }
.rel-linha.sobra { color: var(--ambar); font-weight: 700; }
.rel-linha.quebra { color: var(--alerta); font-weight: 700; }
.rel-hr { border: 0; border-top: 1px dashed #bbb; margin: .35rem 0; }
.rel-nota {
  font-size: 10px; color: #666; font-style: italic;
  background: #fff8e1; border-left: 3px solid var(--ambar);
  padding: .3rem .45rem; margin: .3rem 0;
}
.rel-tabela { width: 100%; border-collapse: collapse; margin-top: .25rem; }
.rel-tabela th {
  font-size: 9.5px; text-transform: uppercase; letter-spacing: .4px;
  border-bottom: 1px solid #ccc; text-align: left; padding: .15rem .2rem; color: #555;
}
.rel-tabela td { font-size: 10.5px; padding: .12rem .2rem; border-bottom: 1px dotted #e5e5e5; }
.rel-tabela .tr { text-align: right; white-space: nowrap; }
.rel-dias { color: var(--alerta); font-size: 9.5px; }
.rel-conferencia { background: #f7f8fc; border-radius: .4rem; padding: .5rem .6rem; }
.rel-rodape {
  text-align: center; font-size: 9.5px; color: #777;
  border-top: 2px dashed #999; padding-top: .5rem; margin-top: .6rem;
}

/* ---------- Menu de contexto ---------- */
#menu-contexto {
  position: absolute; z-index: 2000; display: none;
  min-width: 230px; background: #fff;
  border: 1px solid var(--borda); border-radius: .6rem;
  box-shadow: 0 12px 40px rgba(0,0,0,.22);
  padding: .35rem; 
}
#menu-contexto.aberto { display: block; }
.ctx-item {
  display: flex; align-items: center; width: 100%;
  border: 0; background: transparent; border-radius: .4rem;
  padding: .45rem .6rem; font-size: .85rem; text-align: left;
}
.ctx-item:hover { background: var(--nel-100); }
.ctx-item.ctx-perigo { color: var(--alerta); }
.ctx-item.ctx-perigo:hover { background: #fdecea; }
.ctx-atalho { margin-left: auto; font-family: var(--fonte-mono); font-size: .7rem; color: #888; }
.ctx-sep { border-top: 1px solid var(--borda); margin: .3rem .2rem; }

/* ---------- Admin ---------- */
.nav-admin .nav-link { color: var(--nel-800); font-size: .85rem; }
.nav-admin .nav-link.active { background: var(--nel-grad); color: #fff; }
.tabela-admin td, .tabela-admin th { font-size: .84rem; vertical-align: middle; }
.tabela-admin .num { font-family: var(--fonte-mono); text-align: right; white-space: nowrap; }

/* Chips de permissão na grade de usuários: substituem a fileira de
   checkboxes sem rótulo, que não dizia o que cada coluna era. */
.chip-perm {
  display: inline-block; background: var(--nel-100); color: var(--nel-800);
  border: 1px solid var(--borda); border-radius: 999px;
  padding: .05rem .45rem; font-size: .66rem; font-weight: 600;
  white-space: nowrap; margin-bottom: .12rem;
}
.chip-perm-admin { background: var(--nel-800); color: #fff; border-color: var(--nel-800); }

/* Grade administrativa: linhas mais altas para caber duas informações. */
.tabela-admin td { padding-top: .45rem; padding-bottom: .45rem; }
.linha-skeleton td { padding: .55rem .5rem; }

/* ---------- Ajuda ---------- */
.doc-atalho {
  font-family: var(--fonte-mono); background: var(--nel-100);
  color: var(--nel-800); border-radius: .3rem; padding: .05rem .4rem;
  font-size: .8rem; border: 1px solid var(--borda);
}
.doc-secao h5 { color: var(--nel-800); margin-top: 1.25rem; }

/* ---------- Rodapé institucional (fixo) ---------- */
.pdv-footer {
  flex: 0 0 auto; z-index: 1020;
  height: var(--footer-h);
  background: #fff;
  border-top: 1px solid var(--borda);
  box-shadow: 0 -2px 10px rgba(40, 49, 120, .07);
}
.pdv-footer .footer-inner {
  height: 100%; display: flex; align-items: center; gap: .75rem;
  padding: 0 1rem; font-size: .76rem; color: #6b6f85;
}
/* O logo Nelsys é azul-aço sobre transparência: exige o fundo claro do rodapé. */
.pdv-footer .footer-marca img { height: 20px; display: block; }
.pdv-footer .footer-marca { opacity: .9; transition: opacity .12s ease; }
.pdv-footer .footer-marca:hover { opacity: 1; }
.pdv-footer .footer-sep {
  width: 1px; height: 18px; background: var(--borda);
}
.pdv-footer a { color: var(--nel-600); text-decoration: none; font-weight: 600; }
.pdv-footer a:hover { text-decoration: underline; }
.pdv-footer .footer-produto {
  display: flex; align-items: center; gap: .4rem;
  font-weight: 600; color: var(--nel-800);
}
.pdv-footer .footer-versao {
  font-family: var(--fonte-mono); font-weight: 400; color: #8a8fa3;
}
.pdv-footer .footer-we {
  background: var(--nel-grad); color: #fff;
  border-radius: .3rem; padding: .1rem .45rem;
  font-size: .66rem; letter-spacing: .4px;
}

/* ---------- Aviso de produto não localizado ----------
 * Ocupa a faixa acima da lista de itens em vez de abrir um modal: o operador
 * segue com o leitor na mão e o foco permanece no campo de código. */
.aviso-nl {
  position: relative; flex: 0 0 auto;
  background: linear-gradient(135deg, #b3261e 0%, #8c1d16 100%);
  color: #fff; border-radius: .75rem;
  padding: 1rem 1.25rem; text-align: center;
  box-shadow: 0 10px 30px rgba(179, 38, 30, .35);
}
.aviso-nl .nl-icone { font-size: 2.4rem; line-height: 1; display: block; margin-bottom: .25rem; }
.aviso-nl .nl-titulo {
  font-family: var(--fonte-display); font-weight: 800;
  font-size: clamp(1.3rem, 3.2vmin, 2rem); letter-spacing: 1px;
}
.aviso-nl .nl-codigo {
  font-family: var(--fonte-mono); font-size: 1.05rem;
  background: rgba(0,0,0,.22); border-radius: .4rem;
  padding: .2rem .6rem; display: inline-block; margin: .4rem 0;
  word-break: break-all;
}
.aviso-nl .nl-dica { font-size: .85rem; opacity: .95; }
.aviso-nl .nl-btn { vertical-align: baseline; font-weight: 600; }
.aviso-nl .btn-nl-fechar {
  position: absolute; top: .6rem; right: .7rem;
  filter: invert(1) grayscale(1) brightness(2); opacity: .8;
}
/* Duas pulsadas e para: chama atenção sem virar estrobo na tela. */
.aviso-nl.piscar { animation: nlPulso .45s ease-in-out 2; }
@keyframes nlPulso {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.02); box-shadow: 0 14px 40px rgba(179, 38, 30, .55); }
}

/* ---------- Boot ----------
 * Enquanto o JS não decidiu a página, nada do app aparece. Isso elimina o
 * flash da tela de login em quem já está logado (F5 com sessão válida). */
#app-boot {
  position: fixed; inset: 0; z-index: 4000;
  display: flex; align-items: center; justify-content: center;
  background: var(--papel);
  transition: opacity .25s ease;
}
body:not(.app-iniciando) #app-boot { opacity: 0; pointer-events: none; }
body.app-iniciando > *:not(#app-boot) { visibility: hidden; }

/* ---------- Loading / skeleton ----------
 * Mesmo efeito do SPA-shell do Web Easy: barra deslizante no topo da área,
 * card central com o logo dentro de um anel cônico girando e uma varredura
 * de luz por cima. O card só aparece se o carregamento passar de 250ms —
 * abaixo disso ele piscaria à toa. */
.we-overlay {
  position: absolute; inset: 0; z-index: 500;
  background: rgba(255, 255, 255, .35);
  -webkit-backdrop-filter: saturate(1) blur(.5px);
          backdrop-filter: saturate(1) blur(.5px);
  opacity: 0; pointer-events: none; transition: opacity .12s ease;
}
.we-overlay.ativo { opacity: 1; pointer-events: auto; }
.we-overlay .we-bar {
  position: absolute; top: 0; left: 0; height: 3px; width: 100%;
  background: linear-gradient(90deg, transparent, var(--nel-600), transparent);
  background-size: 40% 100%; background-repeat: no-repeat;
  animation: we-bar-slide 1s infinite linear;
}
@keyframes we-bar-slide {
  0%   { background-position: -40% 0; }
  100% { background-position: 140% 0; }
}

#we-loading-card {
  position: fixed; top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(.96);
  opacity: 0; pointer-events: none; z-index: 3100;
  transition: opacity .2s ease, transform .2s ease;
}
#we-loading-card.com-card { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.we-card {
  display: flex; flex-direction: column; align-items: center; gap: .95rem;
  background: #fff; border-radius: 16px; padding: 1.8rem 2.4rem;
  box-shadow: 0 12px 40px rgba(15, 23, 42, .18);
}
.we-card-stage {
  position: relative; width: 92px; height: 92px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
}
/* anel cônico girando ao redor do logo */
.we-card-stage::before {
  content: ""; position: absolute; inset: -7px; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 70%, var(--nel-600) 90%, transparent 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 0);
          mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 0);
  animation: we-card-spin 1s linear infinite;
}
/* varredura de luz atravessando o logo */
.we-card-stage::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; overflow: hidden;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.75) 50%, transparent 70%);
  background-size: 250% 100%; background-repeat: no-repeat;
  transform: skewX(-20deg);
  animation: we-card-sweep 1.8s ease-in-out infinite;
  pointer-events: none; mix-blend-mode: screen;
}
.we-card-logo { width: 76px; height: 76px; border-radius: 50%; display: block; }
.we-card-text { font-size: .9rem; font-weight: 600; color: #475569; letter-spacing: .2px; }
@keyframes we-card-spin { to { transform: rotate(360deg); } }
@keyframes we-card-sweep {
  0%        { background-position: 220% 0; }
  60%, 100% { background-position: -120% 0; }
}

/* Skeleton de linhas de tabela enquanto a lista carrega. */
.sk-linha {
  height: 11px; border-radius: 6px;
  background: linear-gradient(90deg, #e2e8f0 25%, #eef2f7 37%, #e2e8f0 63%);
  background-size: 400% 100%; animation: sk-shine 1.3s ease-in-out infinite;
}
.sk-linha.w-90 { width: 90%; } .sk-linha.w-70 { width: 70%; }
.sk-linha.w-50 { width: 50%; } .sk-linha.w-30 { width: 30%; }
@keyframes sk-shine { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

/* ---------- Visor do último item ----------
 * Display do PDV clássico: o que acabou de ser bipado fica em evidência,
 * grande e em negrito, até o próximo item entrar. O operador (e o cliente
 * de pé na frente do caixa) confere sem caçar a linha na lista. */
.ultimo-item {
  background: var(--nel-800); color: #fff;
  border-radius: .75rem; padding: .55rem .9rem .65rem;
  box-shadow: 0 4px 14px rgba(40, 49, 120, .25);
  border-left: 5px solid var(--ambar);
}
.ultimo-item .ui-rotulo {
  font-family: var(--fonte-display); font-size: .6rem; font-weight: 700;
  letter-spacing: 1.5px; opacity: .65;
}
.ultimo-item .ui-desc {
  font-family: var(--fonte-display); font-weight: 800;
  font-size: 1.25rem; line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ultimo-item .ui-conta {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; font-variant-numeric: tabular-nums;
}
.ultimo-item .ui-calc {
  font-family: var(--fonte-mono); font-size: .95rem; opacity: .85;
}
.ultimo-item .ui-total {
  font-family: var(--fonte-display); font-weight: 800; font-size: 1.6rem;
  color: #ffd66e;
}
/* Pisca sutil quando o item troca — o olho percebe a mudança sem susto. */
.ultimo-item.pulsa { animation: ui-pulsa .45s ease; }
@keyframes ui-pulsa {
  0% { box-shadow: 0 0 0 4px rgba(255, 214, 110, .55); }
  100% { box-shadow: 0 4px 14px rgba(40, 49, 120, .25); }
}

/* ---------- Busca de produto (scroll infinito) ---------- */
.tabela-busca-scroll {
  max-height: 55vh; overflow-y: auto;
  border: 1px solid var(--borda); border-radius: .5rem;
}
.tabela-busca-scroll thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--nel-100); color: var(--nel-800);
  font-size: .72rem; text-transform: uppercase; letter-spacing: .5px;
}
.gtin-linha {
  font-family: var(--fonte-mono); font-size: .68rem; color: #8a8fa3;
}
/* A linha inteira escolhe o produto — o botão é só o alvo mais óbvio. */
#tb-busca-produto tr { cursor: pointer; }
#tb-busca-produto tr:hover { background: var(--nel-100); }

/* ---------- Consulta de preço ----------
 * O aviso de modo fica no cabeçalho e o preço sai grande, de frente para o
 * cliente. Nada aqui mexe na venda. */
.badge-consulta {
  background: var(--ambar); color: #000;
  font-size: .62rem; letter-spacing: 1px; font-weight: 800;
}
.consulta-preco {
  background: var(--nel-800); color: #fff;
  border-radius: .6rem; padding: .6rem .9rem; margin-bottom: .6rem;
  border-left: 5px solid var(--ambar);
}
.consulta-preco .cp-desc {
  font-family: var(--fonte-display); font-weight: 800; font-size: 1.15rem;
  line-height: 1.2;
}
.consulta-preco .cp-linha {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
}
.consulta-preco .cp-ean { font-family: var(--fonte-mono); font-size: .75rem; opacity: .7; }
.consulta-preco .cp-preco {
  font-family: var(--fonte-display); font-weight: 800; font-size: 1.9rem;
  color: #ffd66e; white-space: nowrap;
}
.consulta-preco .cp-un { font-size: .8rem; font-weight: 600; opacity: .8; }
.consulta-preco .cp-extra { font-size: .74rem; opacity: .85; }
.badge-emb {
  background: var(--nel-700); font-size: .6rem; vertical-align: middle;
}
.badge-frac {
  background: #0d6f8c; font-size: .6rem; vertical-align: middle;
}

/* ---------- Modal de quantidade ---------- */
.qtd-atual {
  background: var(--nel-100); border-radius: .4rem;
  padding: .35rem .6rem; color: var(--nel-800);
  font-variant-numeric: tabular-nums;
}
.qtd-efeito {
  border-radius: .5rem; padding: .5rem .7rem;
  font-size: .82rem; border: 1px solid transparent;
}
.qtd-efeito.alerta { background: #fdecea; border-color: #f5c6c0; color: #8c1d16; }
.qtd-efeito.acrescimo { background: #e6f4ec; border-color: #b7dfc8; color: #14653e; }
.qtd-hist-linha {
  font-family: var(--fonte-mono); font-size: .72rem;
  padding: .1rem 0; border-bottom: 1px dashed var(--borda);
}
.qtd-hist-linha:last-child { border-bottom: 0; }

/* ---------- Modal de CPF do primeiro item ---------- */
.cpf-inicial-icone {
  font-size: 2.6rem; color: var(--nel-600); display: block; margin-bottom: .5rem;
}
.cpf-inicial-pergunta {
  font-family: var(--fonte-display); font-weight: 700;
  font-size: 1.1rem; color: var(--nel-800); margin-bottom: 1rem;
}
.cpf-inicial-input {
  font-family: var(--fonte-mono); font-size: 1.5rem; letter-spacing: 1px;
  border: 2px solid var(--nel-800); border-radius: .6rem;
}
.cpf-inicial-input:focus {
  box-shadow: 0 0 0 .25rem rgba(90, 56, 144, .2); border-color: var(--nel-600);
}

/* ---------- Toast ----------
 * Sobem acima do rodapé (e da tabbar no mobile) para não cobrir os botões
 * de função, e limitam a pilha visível para não tomar a tela toda. */
.toast-container {
  z-index: 3000;
  bottom: calc(var(--footer-h) + .5rem) !important;
  max-height: 45vh; overflow: hidden;
  pointer-events: none;
}
.toast-container .toast { pointer-events: auto; }
@media (max-width: 991.98px) {
  .toast-container {
    bottom: auto !important; top: .5rem !important;
    left: .5rem !important; right: .5rem !important;
    max-height: 40vh;
  }
  .toast-container .toast { width: 100%; }
}

/* ---------- Impressão: só o cupom ---------- */
#area-impressao { display: none; }
@media print {
  body > *:not(#area-impressao) { display: none !important; }
  /* O body vira flex/overflow:hidden na tela; na impressão volta ao normal. */
  html, body { height: auto; display: block; overflow: visible; }
  #area-impressao { display: block !important; }
  #area-impressao .cupom-fiscal {
    box-shadow: none; width: 100%; max-width: 300px; margin: 0;
  }
  @page { margin: 4mm; size: 80mm auto; }
}

/* ---------- Responsivo ---------- */
/* Monitores baixos (ex.: 1366x768 com barra do SO): aperta o supérfluo
   para o FINALIZAR continuar visível sem rolar. */
@media (max-height: 800px) {
  .pdv-corpo { padding: .5rem; gap: .6rem; }
  .painel-total { padding: .6rem .9rem; }
  .painel-total .sub { font-size: .76rem; }
  .btn-funcao { min-height: 42px; padding: .3rem .55rem; }
  .btn-funcao .rot { font-size: .75rem; }
  #in-codigo { font-size: 1.15rem; }
}
@media (max-height: 680px) {
  /* Abaixo disso, a lista secundária de totais sai de cena. */
  .painel-total .sub:not(.destaque) { display: none; }
  .chip-cliente { padding: .4rem .7rem; font-size: .8rem; }
}

/* ---------- Barra de ações mobile ----------
 * Em telas pequenas a grade de 12 botões não cabe e o operador usa o polegar.
 * A coluna direita vira: totais no topo + barra fixa de 5 ações no rodapé,
 * com "Mais" abrindo uma folha com o resto. Escondida no desktop. */
.pdv-tabbar { display: none; }

@media (max-width: 991.98px) {
  /* :not(.d-none) para que esconder via JS (fora do PDV) continue valendo. */
  .pdv-tabbar:not(.d-none) {
    display: grid; grid-template-columns: repeat(5, 1fr);
    flex: 0 0 auto; background: #fff;
    border-top: 1px solid var(--borda);
    box-shadow: 0 -2px 12px rgba(40,49,120,.10);
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .tab-btn {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: .15rem; border: 0; background: transparent;
    padding: .5rem .2rem; min-height: 58px;
    color: var(--nel-800); font-size: .68rem; font-weight: 600;
  }
  .tab-btn i { font-size: 1.35rem; line-height: 1; }
  .tab-btn:active { background: var(--nel-100); }
  .tab-btn:disabled { opacity: .4; }
  .tab-btn-destaque {
    background: var(--nel-grad); color: #fff;
    border-radius: .6rem; margin: .3rem .2rem;
  }
  .tab-btn-destaque:active { filter: brightness(1.15); background: var(--nel-grad); }

  /* Empilhado: totais e cliente no topo (order:0), código e lista de itens
     ocupando o resto (order:1). `order` em vez de column-reverse — a ordem
     fica explícita e não depende de justify-content. */
  #pg-pdv.ativa { overflow: hidden; }
  .pdv-corpo {
    flex-direction: column;
    padding: .5rem; gap: .5rem;
  }
  .pdv-dir { order: 0; flex: 0 0 auto; width: 100%; }
  .pdv-esq { order: 1; flex: 1 1 auto; min-height: 0; }
  .pdv-esq > .card-itens { flex: 1 1 auto; min-height: 0; display: flex; }
  .pdv-dir > .card-pdv:last-child { overflow: visible; }
  .tabela-scroll { max-height: none; }

  /* A grade de funções vira a tabbar: some daqui. */
  .grid-funcoes { display: none; }
  .pdv-dir > .card-pdv.p-2:last-child { display: none; }

  /* Totais em faixa horizontal compacta. */
  .painel-total { padding: .55rem .8rem; }
  .painel-total .rotulo { font-size: .62rem; letter-spacing: 1px; }
  .painel-total .display-valor { font-size: 1.9rem; }
  .painel-total hr { display: none; }
  .painel-total .sub { font-size: .72rem; padding-top: 0; }
  .painel-total .sub:not(.destaque):not(:first-of-type) { display: none; }

  /* Header: no celular sobra pouco espaço — relógio sai (a barra do
     sistema já mostra a hora) e o nome do usuário trunca com reticências
     em vez de estourar para fora da tela. */
  .pdv-header { padding: .4rem .6rem; gap: .5rem; }
  .pdv-header .info-loja { display: none; }
  .pdv-header .relogio { display: none; }
  .pdv-header .marca-logo { height: 28px; width: 28px; }
  .pdv-header .marca { font-size: 1rem; flex-shrink: 0; }
  /* A tag MOCK é aviso de desenvolvedor; no celular ela rouba o espaço do
     nome do operador, que importa mais. */
  .pdv-header .marca .tag { display: none; }
  /* Os botões do header duplicam a tabbar no mobile. */
  .pdv-header .btn-group { display: none; }
  .pdv-header .ms-auto { min-width: 0; gap: .5rem !important; }
  .pdv-header .info { font-size: .7rem; min-width: 0; }
  .pdv-header .info > div {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 128px;
  }
  .badge-caixa { font-size: .62rem; white-space: nowrap; flex-shrink: 0; }

  /* Finalização: os valores são a informação — o botão só confirma.
     Resumo maior, botão em altura normal. */
  .resumo-fin .linha { font-size: .95rem; padding: .22rem 0; }
  .resumo-fin .grande { font-size: 2rem; }
  .resumo-fin .falta, .resumo-fin .troco { font-size: 1.1rem; font-weight: 700; }
  #btn-concluir { padding: .6rem .75rem; font-size: 1rem; }
  .grid-formas .forma-pag { min-height: 64px; }
  #pg-finalizacao .container { padding-bottom: 1rem; }
  /* Dicas de tecla F não valem nada sem teclado físico. */
  .fp-tecla, .doc-atalho-header { display: none; }

  /* Visor do último item: um pouco mais compacto, mas continua sendo o
     elemento mais chamativo abaixo da lista. */
  .ultimo-item { padding: .45rem .7rem .5rem; border-radius: .6rem; }
  .ultimo-item .ui-desc { font-size: 1.05rem; }
  .ultimo-item .ui-calc { font-size: .82rem; }
  .ultimo-item .ui-total { font-size: 1.35rem; }

  /* Admin: o menu lateral vira uma régua de abas horizontais com rolagem,
     com "Frente de caixa" como primeira opção — sem ela não haveria como
     voltar, já que os botões do header ficam ocultos no mobile. */
  #pg-admin .nav-admin {
    flex-direction: row !important; flex-wrap: nowrap;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    gap: .3rem; padding-bottom: .15rem;
    scrollbar-width: none;
  }
  #pg-admin .nav-admin::-webkit-scrollbar { display: none; }
  #pg-admin .nav-admin .nav-link {
    white-space: nowrap; font-size: .78rem; padding: .45rem .7rem;
  }
  #pg-admin .nav-voltar-pdv {
    background: var(--nel-100); color: var(--nel-800) !important;
    border: 1px solid var(--borda); font-weight: 700;
  }

  /* Tabela enxuta: sem colunas de ajuste fino, que vão para o menu de contexto. */
  #tabela-itens th:nth-child(2), #tabela-itens td:nth-child(2),
  #tabela-itens th:nth-child(6), #tabela-itens td:nth-child(6),
  #tabela-itens th:nth-child(7), #tabela-itens td:nth-child(7) { display: none; }
  #tabela-itens td, #tabela-itens th { padding: .4rem .3rem; font-size: .8rem; }

  #in-codigo { font-size: 1.05rem; }
  .chip-cliente { padding: .45rem .7rem; font-size: .78rem; }

  /* Rodapé institucional cede espaço para a tabbar. */
  .pdv-footer { height: auto; }
  .pdv-footer .footer-inner { padding: .3rem .6rem; gap: .5rem; font-size: .66rem; }
  .pdv-footer .footer-produto, .pdv-footer .footer-sep { display: none; }
}

/* ---------- Modais não empurram o layout ----------
 * O Bootstrap compensa a barra de rolagem do desktop adicionando
 * padding-right ao body a cada modal aberto. O body deste app nunca rola
 * (cada página rola por dentro), então a compensação só encolhe a tela —
 * no celular vira uma faixa morta à direita, e com dois modais empilhados
 * (CPF + Mais opções) o efeito dobra. Medido via CDP: 150px por modal. */
body.modal-open { padding-right: 0 !important; }
.modal { padding-right: 0 !important; }

/* Folha "Mais opções": sobe pelo rodapé, como um action sheet.
 * Compacta de propósito — são 13 ações e a folha inteira precisa caber na
 * tela de um celular sem rolar. */
.modal-dialog-end { position: absolute; bottom: 0; left: 0; right: 0; max-width: 100%; }
.folha-mais { border-radius: 1rem 1rem 0 0; border: 0; }
.folha-mais .modal-body { max-height: 62vh; overflow-y: auto; }
.grid-mais { display: grid; grid-template-columns: repeat(4, 1fr); gap: .4rem; }
.btn-mais {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .2rem; padding: .5rem .2rem;
  border: 1px solid var(--borda); border-radius: .55rem; background: #fff;
  color: var(--ink); font-size: .62rem; font-weight: 600; text-align: center;
  min-height: 56px; line-height: 1.15;
}
.btn-mais i { font-size: 1.15rem; color: var(--nel-600); }
.btn-mais:active { background: var(--nel-100); }
.btn-mais:disabled { opacity: .4; }
.btn-mais.perigo i { color: var(--alerta); }

@media (max-width: 575.98px) {
  .pdv-header .marca-txt .marca-mod { display: none; }
  .painel-total .display-valor { font-size: 1.7rem; }
  .grid-mais { grid-template-columns: repeat(3, 1fr); }
  .tab-btn { font-size: .62rem; }
  .tab-btn i { font-size: 1.25rem; }
}

/* Acessibilidade: foco visível e movimento reduzido */
:focus-visible { outline: 3px solid var(--nel-600); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ---------- Login responsivo ---------- */
#pg-login.ativa { padding: 1rem .75rem; overflow-y: auto; }

@media (max-width: 575.98px) {
  #pg-login.ativa { align-items: flex-start; padding-top: 1.25rem; }
  .card-login { width: 100%; max-width: 100%; border-radius: .75rem; }
  .card-login .card-body { padding: 1.25rem !important; }
  .card-login .logo-login-img { height: 56px; width: 56px; }
  .card-login .logo-login { font-size: 1.5rem; }
  .card-login .form-control,
  .card-login #btn-login { font-size: 1rem; min-height: 46px; }
}

@media (max-height: 640px) {
  #pg-login.ativa { align-items: flex-start; }
  .card-login .logo-login-img { height: 44px; width: 44px; margin-bottom: .25rem; }
  .card-login .logo-login { font-size: 1.35rem; }
  .card-login .card-body { padding: 1rem !important; }
  .card-login .mb-3 { margin-bottom: .6rem !important; }
}

.hd-caixa-trocavel { cursor: pointer; }
.hd-caixa-trocavel:hover { filter: brightness(1.12); }