/* CHURRASCARIA_PDV_V2_CSS */

.v2-caixa,
.v2-btn-topo {
  height: 46px;
  border: 1px solid #ddd;
  background: #fff;
  border-radius: 9px;
  padding: 5px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.v2-caixa span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
}

.v2-caixa.aberto span { background: #24a559; }
.v2-caixa.fechado span { background: #d83a3a; }
.v2-caixa small,
.v2-btn-topo small {
  display: block;
  color: #8a8a8a;
  font-size: 8px;
  font-weight: 800;
}

.v2-caixa strong,
.v2-btn-topo strong {
  display: block;
  font-size: 12px;
}

.v2-caixa.aberto {
  background: #eef9f1;
  border-color: #bfe7ca;
}

.v2-caixa.fechado {
  background: #fff3f3;
  border-color: #efc2c2;
}

.v2-btn-topo:hover,
.v2-caixa:hover {
  border-color: var(--laranja);
}

.produto-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.v2-pedido-acoes {
  display: flex;
  gap: 6px;
  align-items: flex-start;
}

.v2-qtd {
  display: grid;
  grid-template-columns: 27px minmax(24px, auto) 27px;
  align-items: center;
  justify-content: center;
  gap: 3px;
}

.v2-qtd button {
  width: 27px;
  height: 27px;
  border-radius: 7px;
  border: 1px solid #ddd;
  background: #fff;
  font-size: 17px;
  line-height: 1;
}

.v2-qtd button:hover {
  border-color: var(--laranja);
  color: var(--laranja);
  background: #fff8f2;
}

.v2-qtd strong {
  text-align: center;
  font-size: 12px;
}

.v2-desconto-linha {
  color: #b65c00;
}

.v2-pagamento-valor {
  margin-top: 9px;
}

.v2-pagamento-valor label {
  display: block;
  font-size: 9px;
  color: #777;
  font-weight: 800;
  margin-bottom: 4px;
}

.v2-pagamento-valor input {
  width: 100%;
  height: 40px;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 0 10px;
  text-align: right;
  font-weight: 800;
  outline: none;
}

.v2-pagamento-valor input:focus {
  border-color: var(--laranja);
  box-shadow: 0 0 0 3px rgba(243,108,13,.08);
}

.v2-pagamentos-registrados {
  margin-top: 9px;
}

.v2-pagamentos-registrados > small {
  display: block;
  font-size: 8px;
  color: #888;
  font-weight: 800;
  margin-bottom: 4px;
}

.v2-pagamentos-registrados > div {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.v2-pagamentos-registrados span {
  padding: 5px 7px;
  border-radius: 7px;
  background: #f3f7f4;
  border: 1px solid #dce9df;
  color: #34724a;
  font-size: 9px;
}

.v2-imprimir-check {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  color: #777;
  font-size: 9px;
}

.v2-imprimir-check input {
  accent-color: var(--laranja);
}

.v2-modal-fundo {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(0,0,0,.35);
}

.v2-modal-fundo[hidden] {
  display: none;
}

.v2-modal {
  width: min(560px, 96vw);
  max-height: 88vh;
  overflow: auto;
  background: #fff;
  border-radius: 15px;
  box-shadow: 0 24px 70px rgba(0,0,0,.25);
}

.v2-modal > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 18px 20px 12px;
  border-bottom: 1px solid #eee;
}

.v2-modal > header small {
  color: var(--laranja);
  font-weight: 800;
  font-size: 9px;
}

.v2-modal > header h2 {
  margin: 2px 0 0;
  font-size: 20px;
}

.v2-modal > header button {
  border: 0;
  background: transparent;
  font-size: 27px;
  color: #777;
}

.v2-modal-corpo {
  padding: 18px 20px 20px;
}

.v2-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.v2-form-grid.um {
  grid-template-columns: 1fr;
}

.v2-form-grid label {
  font-size: 10px;
  color: #666;
  font-weight: 700;
}

.v2-form-grid input,
.v2-form-grid select {
  width: 100%;
  height: 42px;
  margin-top: 5px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #fff;
  padding: 0 10px;
  outline: none;
}

.v2-form-grid input:focus,
.v2-form-grid select:focus {
  border-color: var(--laranja);
}

.v2-btn-principal {
  width: 100%;
  height: 45px;
  border: 0;
  border-radius: 9px;
  margin-top: 15px;
  background: var(--laranja);
  color: #fff;
  font-weight: 800;
}

.v2-btn-principal.perigo,
.v2-acoes-caixa .perigo {
  background: #d43b3b;
  color: #fff;
}

.v2-resumo-caixa {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.v2-resumo-caixa > div {
  border: 1px solid #eee;
  border-radius: 9px;
  padding: 10px 11px;
}

.v2-resumo-caixa span {
  display: block;
  color: #777;
  font-size: 9px;
  margin-bottom: 3px;
}

.v2-resumo-caixa strong {
  font-size: 14px;
}

.v2-resumo-caixa .destaque {
  grid-column: 1 / -1;
  background: #fff7ef;
  border-color: #ffd6b4;
}

.v2-resumo-caixa .destaque strong {
  color: var(--laranja);
  font-size: 20px;
}

.v2-acoes-caixa {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  margin-top: 14px;
}

.v2-acoes-caixa button {
  min-height: 42px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #fff;
  font-weight: 700;
}

.v2-fechamento-alerta {
  padding: 12px;
  margin-bottom: 12px;
  border-radius: 9px;
  background: #fff6ec;
  border: 1px solid #ffd6af;
  font-size: 12px;
}

@media (max-width: 1180px) {
  .v2-btn-topo small,
  .v2-caixa small { display: none; }
  .v2-btn-topo { padding: 5px 9px; }
}

@media (max-width: 850px) {
  .v2-caixa { min-width: 45px; padding: 5px 8px; }
  .v2-caixa div { display: none; }
  .v2-btn-topo { min-width: 45px; }
  .v2-btn-topo strong { font-size: 0; }
  .v2-btn-topo strong::first-letter { font-size: 16px; }
  .v2-form-grid,
  .v2-resumo-caixa,
  .v2-acoes-caixa { grid-template-columns: 1fr; }
  .v2-resumo-caixa .destaque { grid-column: auto; }
}