/* PDV / balcão — só o que é DESTA tela.
   A base (paleta, body, .painel, .aba, .linha, inputs, botões, tabela) mora em
   sistema.css desde 09/09/2026. Antes cada tela repetia a base inteira, e por isso
   qualquer ajuste de identidade tinha que ser feito em cinco arquivos — ou ficava
   divergente, que foi o que aconteceu.
   ⚠️ Este arquivo carrega DEPOIS do sistema.css: o que estiver aqui vence. Só coloque
   regra que a tela realmente precisa mudar. */

/* Variações de botão que só o balcão usa: o "grande" é o de finalizar venda, batido
   com a mão inteira e não com a ponta do dedo. */
input.curto { width: 110px; }
button.grande { width: 100%; padding: 16px; font-size: 17px; margin-top: 10px; }
button.pequeno { padding: 5px 10px; font-size: 13px; }
button.primario:disabled { background: var(--borda); border-color: var(--borda); color: var(--apagado); }
button:disabled { cursor: not-allowed; }
.linha.entre { justify-content: space-between; }
/* Duas colunas: agir à esquerda, conferir à direita */
.venda { display: grid; grid-template-columns: 1fr 420px; gap: 16px; padding: 16px; max-width: 1320px; margin: 0 auto; }
@media (max-width: 1000px) { .venda { grid-template-columns: 1fr; } }
.coluna-total .painel { position: sticky; top: 74px; }

/* O campo do leitor: o maior da tela, porque é onde a mão vai */
.bipe label { display: block; font-size: 13px; color: var(--apagado); margin-bottom: 6px; text-transform: uppercase; letter-spacing: .04em; }
.bipe input {
  width: 100%;
  font-size: 26px;
  padding: 16px;
  letter-spacing: .06em;
  font-variant-numeric: tabular-nums;
  border: 2px solid var(--acento);
}
.bipe input:focus { outline: 3px solid rgba(79, 70, 229, .18); }

.itens { max-height: 44vh; overflow-y: auto; margin-bottom: 8px; }
.item {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--borda);
  align-items: baseline;
}
.item:last-child { border-bottom: 0; }
.item .nome { flex: 1; }
.item .qtd { color: var(--apagado); font-size: 13px; white-space: nowrap; }
.item .dinheiro { font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Item recém-adicionado pisca: confirma o bipe sem o operador tirar o olho do cliente */
.item.novo { animation: destaca 1s ease-out; }
@keyframes destaca { from { background: #e0e7ff; } to { background: transparent; } }

.rodape-venda { border-top: 2px solid var(--borda); padding-top: 12px; }
.rodape-venda .linha { margin-bottom: 8px; }
.dinheiro { font-variant-numeric: tabular-nums; }
.rodape-venda .total { font-size: 26px; font-weight: 700; margin-top: 6px; }

.pagamento { margin-top: 14px; }
.formas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 8px; }
.forma {
  padding: 10px 6px;
  border: 1px solid var(--borda);
  border-radius: 8px;
  background: var(--fundo);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  color: var(--apagado);
}
.forma.ativa { background: var(--acento); border-color: var(--acento); color: #fff; }

.achado {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--borda);
  align-items: center;
}
.achado:last-child { border-bottom: 0; }
.achado .meta { font-size: 12px; color: var(--apagado); }

.cartoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin: 12px 0; }
.cartao { border: 1px solid var(--borda); border-radius: 10px; padding: 12px 14px; background: var(--fundo); }
.cartao .rotulo { font-size: 12px; color: var(--apagado); text-transform: uppercase; letter-spacing: .04em; }
.cartao .valor { font-size: 20px; font-weight: 700; margin-top: 4px; font-variant-numeric: tabular-nums; }

.tabela-area { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: left; font-size: 12px; color: var(--apagado); text-transform: uppercase; letter-spacing: .04em; padding: 6px 8px; border-bottom: 1px solid var(--borda); }
td { padding: 8px; border-bottom: 1px solid var(--borda); }
td.valor, th.valor { text-align: right; font-variant-numeric: tabular-nums; }

.vazio { color: var(--apagado); font-size: 14px; padding: 18px 0; text-align: center; }

.aviso {
  position: fixed;
  right: 20px;
  bottom: 20px;
  background: var(--texto);
  color: #fff;
  padding: 14px 18px;
  border-radius: 10px;
  font-size: 15px;
  max-width: 420px;
  z-index: 50;
}
.aviso.ruim { background: var(--avaria); }