:root {
  --brasa: #dc382e;
  --brasa2: #ad201b;
  --laranja: #ef8f20;
  --grafite: #3f3f3f;
  --carvao: #2c2c2c;
  --cinza: #707070;
  --verde: #278e58;
  --linha: #d0d0d0;
}

* {
  box-sizing: border-box;
}

body.mesas-real-page {
  margin: 0;
  min-width: 1180px;
  min-height: 100vh;
  background: #707070;
  font-family: "Segoe UI", Arial, sans-serif;
}

.topo-mesas {
  padding-right: 15px;
  color: #eee;
  font-size: 11px;
}

.menu-erp a {
  display: flex;
  align-items: center;
  padding: 0 18px;
  color: #222;
  text-decoration: none;
  font-size: 12px;
}

.barra-ferramentas-mesas {
  min-height: 75px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 18px;
  color: #222;
  background: #efefef;
  border-bottom: 1px solid #aaa;
}

.titulo-modulo {
  display: flex;
  align-items: center;
  gap: 12px;
}

.titulo-icone {
  font-size: 32px;
}

.titulo-modulo strong {
  display: block;
  font-size: 17px;
}

.titulo-modulo small {
  color: #777;
  font-size: 11px;
}

.acoes-modulo {
  display: flex;
  gap: 8px;
}

.acoes-modulo button,
.botao-brasa,
.botao-cinza {
  min-height: 36px;
  padding: 0 16px;
  border: 1px solid #bbb;
  background: white;
}

.botao-brasa {
  color: white !important;
  border-color: var(--brasa2) !important;
  background:
    linear-gradient(
      180deg,
      var(--brasa),
      var(--brasa2)
    ) !important;
}

.botao-cinza {
  background: #ddd;
}

.area-central-mesas {
  flex: 1;
  padding: 16px 28px;
  background: #707070;
}

.painel-central-mesas {
  min-height: 680px;
  padding: 18px 20px 10px;
  background: #f5f5f5;
  border: 1px solid #4b4b4b;
  box-shadow: 0 15px 40px rgba(0,0,0,.15);
}

.pesquisa-central {
  width: 430px;
  height: 36px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.pesquisa-central input {
  width: 100%;
  height: 32px;
  padding: 0 10px;
  border: 1px solid #aaa;
  outline: none;
}

.bloco-mesas {
  margin-top: 22px;
}

.bloco-mesas > header {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 11px;
  color: #444;
  font-size: 13px;
}

.bloco-mesas > header span {
  min-width: 24px;
  padding: 2px 7px;
  color: white;
  text-align: center;
  border-radius: 10px;
  background: #555;
  font-size: 10px;
}

.grade-mesas {
  display: grid;
  grid-template-columns:
    repeat(13, minmax(72px, 1fr));
  gap: 10px;
}

.mesa-mini {
  min-height: 95px;
  padding: 7px;
  color: white;
  border: 0;
  cursor: pointer;
  text-align: center;
}

.mesa-mini.livre {
  background: #6b6b6b;
}

.mesa-mini.aberta {
  background:
    linear-gradient(
      145deg,
      #29945b,
      #217a4b
    );
}

.mesa-mini.fechando {
  background:
    linear-gradient(
      145deg,
      #c73a32,
      #9e2420
    );
}

.mesa-mini:hover {
  filter: brightness(1.08);
}

.mesa-mini small {
  display: block;
  font-size: 9px;
  text-transform: uppercase;
}

.mesa-mini strong {
  display: block;
  margin-top: 9px;
  font-size: 22px;
}

.mesa-mini .mesa-detalhe-mini {
  margin-top: 5px;
  font-size: 9px;
  line-height: 1.3;
}

.rodape-central-mesas {
  display: flex;
  gap: 25px;
  margin-top: 20px;
  padding-top: 9px;
  border-top: 1px solid #ddd;
  color: #777;
  font-size: 10px;
}


/* =====================================================
   MODAIS
===================================================== */

.oculto {
  display: none !important;
}

.modal-real {
  position: fixed;
  inset: 0;
  z-index: 5000;
  display: grid;
  place-items: center;
}

.modal-real-fundo {
  position: absolute;
  inset: 0;
  background: rgba(35,35,35,.62);
}

.janela-modal {
  position: relative;
  z-index: 1;
  width: min(94vw, 1100px);
  max-height: 92vh;
  overflow: hidden;
  color: #333;
  background: #f6f6f6;
  border: 1px solid #555;
  box-shadow: 0 25px 80px rgba(0,0,0,.45);
}

.janela-modal.pequena {
  width: 600px;
}

.janela-modal.comanda {
  width: min(96vw, 1180px);
  height: min(90vh, 720px);
}

.janela-modal.produtos {
  width: min(94vw, 1020px);
  height: min(88vh, 690px);
}

.janela-modal.pagamento {
  width: min(92vw, 920px);
  height: min(86vh, 650px);
}

.janela-modal > header {
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: 12px;
  color: white;
  background: #444;
}

.janela-modal > header button {
  width: 42px;
  height: 38px;
  color: white;
  background: transparent;
  border: 0;
  font-size: 19px;
}


/* =====================================================
   ABRIR MESA
===================================================== */

#formAbrirMesa {
  padding: 20px;
}

.form-grade {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 13px;
}

.form-grade label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
}

.form-grade input,
.form-grade select,
.form-grade textarea {
  width: 100%;
  padding: 8px;
  border: 1px solid #aaa;
  background: white;
}

.form-largo {
  grid-column: 1 / -1;
}

#formAbrirMesa footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 20px;
  padding-top: 13px;
  border-top: 1px solid #ddd;
}


/* =====================================================
   COMANDA
===================================================== */

.comanda-corpo {
  height: calc(100% - 38px);
  display: grid;
  grid-template-columns: 245px 1fr;
}

.comanda-lateral {
  position: relative;
  padding: 16px;
  background: #f4f4f4;
  border-right: 1px solid #bbb;
}

.numero-comanda {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.numero-comanda > strong {
  color: var(--verde);
  font-size: 27px;
}

.numero-comanda > span {
  padding: 8px 13px;
  color: white;
  background: var(--verde);
  font-size: 11px;
}

.info-comanda {
  display: grid;
  grid-template-columns: 85px 1fr;
  gap: 9px 6px;
  padding-bottom: 17px;
  border-bottom: 1px solid #ccc;
  font-size: 11px;
}

.info-comanda span {
  color: #777;
}

.acoes-laterais {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 15px;
  display: grid;
  gap: 5px;
}

.acoes-laterais button {
  min-height: 38px;
  text-align: left;
  border: 0;
  background: transparent;
}

.comanda-conteudo {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.comanda-topo {
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 15px;
  border-bottom: 1px solid #ccc;
}

.comanda-topo > div:first-child {
  display: flex;
  gap: 7px;
}

.comanda-busca {
  display: flex;
  align-items: center;
  gap: 7px;
}

.comanda-busca input {
  width: 180px;
  height: 32px;
  padding: 0 8px;
  border: 1px solid #aaa;
}

.comanda-busca button {
  height: 34px;
  border: 0;
}

.itens-comanda {
  flex: 1;
  overflow: auto;
}

.itens-comanda table,
.lista-produtos table {
  width: 100%;
  border-collapse: collapse;
}

.itens-comanda th,
.itens-comanda td,
.lista-produtos th,
.lista-produtos td {
  padding: 10px;
  border-bottom: 1px solid #ddd;
  text-align: left;
  font-size: 12px;
}

.itens-comanda th {
  background: #f0f0f0;
}

.item-cancelado {
  opacity: .45;
  text-decoration: line-through;
}

.botao-item-opcoes {
  width: 28px;
  height: 28px;
  color: var(--brasa);
  border: 1px solid #ccc;
  border-radius: 50%;
  background: white;
}

.totais-comanda {
  padding: 8px 18px;
  border-top: 1px solid #bbb;
}

.totais-comanda > div {
  display: flex;
  justify-content: space-between;
  padding: 5px 0;
}

.total-destaque {
  margin-top: 4px;
  padding-top: 8px !important;
  border-top: 1px solid #bbb;
  font-size: 17px;
}

.total-destaque strong {
  color: var(--brasa);
}

.acoes-comanda {
  min-height: 62px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 10px 13px;
  border-top: 1px solid #bbb;
}

.acoes-comanda button {
  min-width: 120px;
  border: 1px solid #aaa;
  background: #fafafa;
}

.botao-pagamento {
  min-width: 190px !important;
  color: white;
  border-color: var(--verde) !important;
  background: var(--verde) !important;
  font-weight: 700;
}


/* =====================================================
   PRODUTOS
===================================================== */

.produto-pesquisa {
  height: 55px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-bottom: 1px solid #bbb;
}

.produto-pesquisa input {
  width: 320px;
  height: 34px;
  padding: 0 10px;
  border: 1px solid #aaa;
}

.produto-corpo {
  height: calc(100% - 93px);
  display: grid;
  grid-template-columns: 190px 1fr;
}

.categorias-produtos {
  overflow-y: auto;
  padding: 9px;
  border-right: 1px solid #bbb;
}

.categoria-produto {
  width: 100%;
  min-height: 45px;
  margin-bottom: 7px;
  padding: 5px;
  color: white;
  border: 0;
  background: #555;
  font-weight: 700;
}

.categoria-produto.ativa {
  background: var(--brasa);
}

.lista-produtos {
  overflow: auto;
}

.lista-produtos th {
  position: sticky;
  top: 0;
  background: #eee;
}

.lista-produtos tr:hover td {
  background: #fff3e8;
}

.adicionar-produto {
  width: 30px;
  height: 30px;
  color: white;
  border: 0;
  border-radius: 50%;
  background: var(--laranja);
  font-size: 18px;
}


/* =====================================================
   PAGAMENTO
===================================================== */

.pagamento-corpo {
  height: calc(100% - 38px);
  display: grid;
  grid-template-columns: 215px 1fr;
}

.formas-pagamento {
  padding: 16px 13px;
  border-right: 1px solid #bbb;
  overflow-y: auto;
}

.formas-pagamento button {
  width: 100%;
  min-height: 55px;
  margin-bottom: 9px;
  border: 1px solid #bbb;
  background: white;
  font-size: 12px;
}

.formas-pagamento button.ativa {
  color: white;
  border-color: var(--brasa);
  background: var(--brasa);
}

.resumo-pagamento {
  padding: 18px 25px;
}

.resumo-pagamento h3 {
  margin: 0 0 20px;
  color: var(--brasa);
}

.linha-pagamento {
  display: flex;
  justify-content: space-between;
  padding: 13px 8px;
  border-bottom: 1px solid #ddd;
}

.linha-pagamento.restante {
  margin-top: 15px;
  font-size: 22px;
}

.linha-pagamento.restante strong {
  color: var(--brasa);
}

.campo-valor-pagamento {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-top: 30px;
  font-size: 12px;
  font-weight: 600;
}

.campo-valor-pagamento input {
  width: 260px;
  height: 44px;
  padding: 0 12px;
  text-align: right;
  font-size: 20px;
  border: 1px solid #aaa;
}

.forma-selecionada {
  margin-top: 18px;
}

.confirmar-pagamento {
  min-width: 230px;
  height: 44px;
  margin-top: 25px;
  border: 0;
}


/* =====================================================
   TOAST
===================================================== */

.toast-mesas {
  position: fixed;
  right: 20px;
  bottom: 40px;
  z-index: 9000;
  min-width: 280px;
  padding: 12px 16px;
  color: white;
  background: #292929;
  border-left: 4px solid var(--laranja);
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: .2s;
  font-size: 12px;
}

.toast-mesas.visivel {
  opacity: 1;
  transform: translateY(0);
}


@media (max-width: 1450px) {

  .grade-mesas {
    grid-template-columns:
      repeat(10, minmax(72px, 1fr));
  }

}

/* =====================================================
   CHURRASCARIA_COMANDA_CONTRASTE_PRODUTOS_V1
   Melhora contraste da tela de comanda / produtos
===================================================== */

/* Cabeçalho da grade de itens */
#modalComanda table thead th,
#modal-comanda table thead th,
.comanda-modal table thead th,
.janela-comanda table thead th,
.modal-comanda table thead th,
.painel-comanda table thead th,
.comanda-detalhe table thead th {
  background: #545454 !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  border-color: #6a6a6a !important;
  text-shadow: none !important;
}

/* Linhas da lista de itens */
#modalComanda table tbody td,
#modal-comanda table tbody td,
.comanda-modal table tbody td,
.janela-comanda table tbody td,
.modal-comanda table tbody td,
.painel-comanda table tbody td,
.comanda-detalhe table tbody td {
  background: #ffffff !important;
  color: #202020 !important;
  border-color: #d6d6d6 !important;
  font-weight: 500 !important;
}

/* Zebra para leitura */
#modalComanda table tbody tr:nth-child(even) td,
#modal-comanda table tbody tr:nth-child(even) td,
.comanda-modal table tbody tr:nth-child(even) td,
.janela-comanda table tbody tr:nth-child(even) td,
.modal-comanda table tbody tr:nth-child(even) td,
.painel-comanda table tbody tr:nth-child(even) td,
.comanda-detalhe table tbody tr:nth-child(even) td {
  background: #f6f7f9 !important;
}

/* Hover */
#modalComanda table tbody tr:hover td,
#modal-comanda table tbody tr:hover td,
.comanda-modal table tbody tr:hover td,
.janela-comanda table tbody tr:hover td,
.modal-comanda table tbody tr:hover td,
.painel-comanda table tbody tr:hover td,
.comanda-detalhe table tbody tr:hover td {
  background: #eef4ff !important;
}

/* Produto mais visível */
#modalComanda table tbody td:nth-child(2),
#modal-comanda table tbody td:nth-child(2),
.comanda-modal table tbody td:nth-child(2),
.janela-comanda table tbody td:nth-child(2),
.modal-comanda table tbody td:nth-child(2),
.painel-comanda table tbody td:nth-child(2),
.comanda-detalhe table tbody td:nth-child(2) {
  color: #111111 !important;
  font-weight: 700 !important;
}

/* Quantidade e valor mais legíveis */
#modalComanda table tbody td:nth-child(1),
#modalComanda table tbody td:nth-child(3),
#modal-comanda table tbody td:nth-child(1),
#modal-comanda table tbody td:nth-child(3),
.comanda-modal table tbody td:nth-child(1),
.comanda-modal table tbody td:nth-child(3),
.janela-comanda table tbody td:nth-child(1),
.janela-comanda table tbody td:nth-child(3),
.modal-comanda table tbody td:nth-child(1),
.modal-comanda table tbody td:nth-child(3),
.painel-comanda table tbody td:nth-child(1),
.painel-comanda table tbody td:nth-child(3),
.comanda-detalhe table tbody td:nth-child(1),
.comanda-detalhe table tbody td:nth-child(3) {
  color: #2a2a2a !important;
  font-weight: 700 !important;
}

/* Área "nenhum item lançado" */
#modalComanda .lista-vazia,
#modalComanda .sem-itens,
#modalComanda .nenhum-item,
#modal-comanda .lista-vazia,
#modal-comanda .sem-itens,
#modal-comanda .nenhum-item,
.comanda-modal .lista-vazia,
.comanda-modal .sem-itens,
.comanda-modal .nenhum-item,
.janela-comanda .lista-vazia,
.janela-comanda .sem-itens,
.janela-comanda .nenhum-item,
.modal-comanda .lista-vazia,
.modal-comanda .sem-itens,
.modal-comanda .nenhum-item {
  background: #2f3136 !important;
  color: #f3f4f6 !important;
  font-weight: 500 !important;
}

/* Título da seção de itens */
#modalComanda .titulo-itens,
#modalComanda .cabecalho-itens,
#modal-comanda .titulo-itens,
#modal-comanda .cabecalho-itens,
.comanda-modal .titulo-itens,
.comanda-modal .cabecalho-itens,
.janela-comanda .titulo-itens,
.janela-comanda .cabecalho-itens,
.modal-comanda .titulo-itens,
.modal-comanda .cabecalho-itens {
  color: #181818 !important;
  font-weight: 700 !important;
}

/* Campo de busca do produto */
#modalComanda input[type="search"],
#modalComanda input[type="text"],
#modal-comanda input[type="search"],
#modal-comanda input[type="text"],
.comanda-modal input[type="search"],
.comanda-modal input[type="text"],
.janela-comanda input[type="search"],
.janela-comanda input[type="text"],
.modal-comanda input[type="search"],
.modal-comanda input[type="text"] {
  color: #1b1b1b !important;
  background: #ffffff !important;
  border-color: #bdbdbd !important;
}

/* Botão + Produtos */
#modalComanda .btn-produtos,
#modalComanda .btn-add-produto,
#modalComanda .btn-adicionar-produto,
#modal-comanda .btn-produtos,
#modal-comanda .btn-add-produto,
#modal-comanda .btn-adicionar-produto,
.comanda-modal .btn-produtos,
.comanda-modal .btn-add-produto,
.comanda-modal .btn-adicionar-produto,
.janela-comanda .btn-produtos,
.janela-comanda .btn-add-produto,
.janela-comanda .btn-adicionar-produto,
.modal-comanda .btn-produtos,
.modal-comanda .btn-add-produto,
.modal-comanda .btn-adicionar-produto {
  background: linear-gradient(180deg, #e23b2d 0%, #bf2015 100%) !important;
  color: #ffffff !important;
  border-color: #a71910 !important;
  font-weight: 700 !important;
  box-shadow: none !important;
}

/* Total da comanda mais forte */
#modalComanda .valor-total,
#modalComanda .total-geral,
#modal-comanda .valor-total,
#modal-comanda .total-geral,
.comanda-modal .valor-total,
.comanda-modal .total-geral,
.janela-comanda .valor-total,
.janela-comanda .total-geral,
.modal-comanda .valor-total,
.modal-comanda .total-geral {
  color: #e23b2d !important;
  font-weight: 800 !important;
}


/* =====================================================
   CHURRASCARIA_PRODUTOS_COMANDA_V2
===================================================== */

.produtos-v2 {
  width: min(96vw, 1180px) !important;
  height: min(90vh, 760px) !important;
}

.titulo-modal-produtos {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.titulo-modal-produtos strong {
  font-size: 14px;
}

.titulo-modal-produtos small {
  margin-top: 2px;
  color: #d7d7d7;
  font-size: 10px;
  font-weight: 400;
}


/* PESQUISA */

.produto-pesquisa-v2 {
  height: 64px !important;
  padding: 11px 16px !important;
  background: #f1f2f4;
}

.produto-pesquisa-v2 input {
  width: 420px !important;
  height: 38px !important;
  padding: 0 12px !important;
  color: #222;
  background: white;
  border: 1px solid #aeb5bd !important;
  font-size: 13px;
}

.produto-pesquisa-v2 input:focus {
  border-color: #d7372f !important;
  outline: 2px solid rgba(215,55,47,.10);
}

.icone-busca-produto {
  font-size: 20px;
}

.botao-atualizar-produtos {
  height: 38px;
  margin-left: 5px;
  padding: 0 15px;
  color: #333;
  background: white;
  border: 1px solid #b5b5b5;
  font-weight: 600;
}


/* CORPO */

.produto-corpo-v2 {
  height: calc(100% - 102px) !important;
  grid-template-columns: 210px 1fr !important;
}

.categorias-area {
  min-width: 0;
  background: #eceff1;
  border-right: 1px solid #bfc5ca;
  overflow: hidden;
}

.categorias-titulo {
  height: 36px;
  display: flex;
  align-items: center;
  padding-left: 12px;
  color: #444;
  background: #dfe3e6;
  border-bottom: 1px solid #c3c8cc;
  font-size: 11px;
  font-weight: 800;
}

.categorias-produtos {
  height: calc(100% - 36px);
  overflow-y: auto;
  padding: 9px !important;
}


/* CATEGORIAS */

.categoria-produto {
  position: relative;
  width: 100%;
  min-height: 48px !important;
  margin-bottom: 7px !important;
  padding: 7px 8px !important;

  color: #fff !important;

  border: 0 !important;
  border-left: 4px solid transparent !important;

  background:
    linear-gradient(
      180deg,
      #565c63,
      #444a50
    ) !important;

  text-align: left;
  font-size: 11px;
  font-weight: 800 !important;
  transition: .12s;
}

.categoria-produto:hover {
  filter: brightness(1.1);
  transform: translateX(2px);
}

.categoria-produto.ativa {
  color: white !important;
  border-left-color: #ffb04a !important;

  background:
    linear-gradient(
      180deg,
      #e53a31,
      #bd211a
    ) !important;

  box-shadow:
    0 2px 5px rgba(0,0,0,.15);
}


/* LISTAGEM */

.lista-produtos-v2 {
  position: relative;
  padding-bottom: 38px;
  background: white;
}

.lista-produtos-v2 table {
  table-layout: fixed;
}

.lista-produtos-v2 thead th {
  position: sticky;
  top: 0;
  z-index: 2;

  height: 42px;

  color: #fff !important;

  background:
    linear-gradient(
      180deg,
      #343a40,
      #282d32
    ) !important;

  border-right:
    1px solid #565d64 !important;

  border-bottom:
    1px solid #202428 !important;

  font-size: 11px !important;
  font-weight: 700 !important;
}

.lista-produtos-v2 tbody td {
  height: 43px;
  padding: 8px 10px !important;

  color: #222 !important;

  background: white !important;

  border-bottom:
    1px solid #d9dde0 !important;

  font-size: 11px !important;
}

.lista-produtos-v2 tbody tr:nth-child(even) td {
  background: #f6f7f8 !important;
}

.lista-produtos-v2 tbody tr:hover td {
  background: #fff0e5 !important;
}

.lista-produtos-v2 tbody td:nth-child(3) {
  color: #111 !important;
  font-weight: 700 !important;
}

.lista-produtos-v2 tbody td:nth-child(4) {
  color: #212121 !important;
  font-weight: 800 !important;
  text-align: right;
}

.col-categoria {
  width: 125px;
}

.col-codigo {
  width: 90px;
}

.col-preco {
  width: 125px;
  text-align: right !important;
}

.col-adicionar {
  width: 85px;
  text-align: center !important;
}

.col-personalizar {
  width: 95px;
  text-align: center !important;
}

.lista-produtos-v2 tbody td:nth-child(5),
.lista-produtos-v2 tbody td:nth-child(6) {
  text-align: center;
}


/* BOTÃO + */

.adicionar-produto {
  width: 31px !important;
  height: 31px !important;

  display: inline-grid;
  place-items: center;

  color: white !important;

  border: 0 !important;
  border-radius: 50% !important;

  background:
    linear-gradient(
      180deg,
      #f39b31,
      #d97a0c
    ) !important;

  box-shadow:
    0 2px 4px rgba(0,0,0,.16);

  font-size: 20px !important;
  line-height: 1;
}

.adicionar-produto:hover {
  filter: brightness(1.08);
}


/* PERSONALIZAR */

.personalizar-produto-btn {
  width: 31px;
  height: 31px;

  color: #333;

  border:
    1px solid #9ea6ad;

  border-radius:
    50%;

  background:
    #fff;

  font-weight:
    800;

  line-height:
    1;
}

.personalizar-produto-btn:hover {
  color: white;
  border-color: #d22e25;
  background: #d22e25;
}


/* RODAPÉ */

.rodape-produtos-modal {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;

  height: 38px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 0 14px;

  color: #777;

  background: #f1f2f4;

  border-top:
    1px solid #cbd0d4;

  font-size: 10px;
}


/* =====================================================
   PERSONALIZAR PRODUTO
===================================================== */

.janela-modal.personalizar-produto {
  width: 560px;
}

#formPersonalizarProduto {
  padding: 18px;
}

.produto-personalizar-resumo {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 15px;

  padding: 13px 15px;
  margin-bottom: 18px;

  background: #eef1f3;

  border:
    1px solid #d3d8dc;
}

.produto-personalizar-resumo small {
  display: block;
  margin-bottom: 3px;
  color: #777;
  font-size: 9px;
  font-weight: 700;
}

.produto-personalizar-resumo strong {
  font-size: 14px;
}

.produto-personalizar-preco {
  min-width: 105px;
  text-align: right;
}

.produto-personalizar-preco strong {
  color: #d62f25;
  font-size: 17px;
}

.form-personalizar {
  display: grid;
  gap: 14px;
}

.form-personalizar label {
  display: flex;
  flex-direction: column;
  gap: 6px;

  color: #333;

  font-size: 11px;
  font-weight: 700;
}

.form-personalizar input,
.form-personalizar textarea {
  padding: 9px 10px;

  color: #222;

  background: white;

  border:
    1px solid #adb5bc;

  font-family: inherit;
}

.form-personalizar input {
  width: 180px;
  height: 39px;
}

#formPersonalizarProduto footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;

  margin-top: 20px;
  padding-top: 13px;

  border-top:
    1px solid #ddd;
}

#formPersonalizarProduto footer button {
  min-height: 38px;
  padding: 0 16px;
}



/* =====================================================
   CHURRASCARIA_CORES_CATEGORIAS_CSS_V1
===================================================== */


/* =====================================================
   BOTÃO DA CATEGORIA
===================================================== */

.categorias-produtos
.categoria-produto {

  position:
    relative;

  overflow:
    hidden;

  display:
    flex;

  align-items:
    center;

  gap:
    9px;

  color:
    var(
      --categoria-texto,
      #fff
    ) !important;

  background:
    var(
      --categoria-cor,
      #546E7A
    ) !important;

  border:
    1px solid
    rgba(
      0,
      0,
      0,
      .15
    ) !important;

  border-left:
    5px solid
    rgba(
      0,
      0,
      0,
      .25
    ) !important;

  box-shadow:
    inset
    0
    -10px
    18px
    rgba(
      0,
      0,
      0,
      .07
    );

}


.categorias-produtos
.categoria-produto:hover {

  filter:
    brightness(
      1.08
    );

}


.categorias-produtos
.categoria-produto.ativa {

  outline:
    3px solid
    rgba(
      255,
      255,
      255,
      .95
    );

  outline-offset:
    -4px;

  box-shadow:
    0 2px 7px
    rgba(
      0,
      0,
      0,
      .28
    );

}


.categoria-cor-indicador {

  width:
    10px;

  height:
    10px;

  flex:
    0 0 10px;

  border-radius:
    50%;

  background:
    rgba(
      255,
      255,
      255,
      .85
    );

  border:
    1px solid
    rgba(
      0,
      0,
      0,
      .18
    );

}


/* =====================================================
   CATEGORIA NA LISTA DE PRODUTOS
===================================================== */

.categoria-badge-produto {

  display:
    inline-flex;

  align-items:
    center;

  min-height:
    25px;

  max-width:
    115px;

  padding:
    4px 8px;

  overflow:
    hidden;

  color:
    var(
      --categoria-texto,
      #fff
    ) !important;

  background:
    var(
      --categoria-cor,
      #546E7A
    );

  border-radius:
    4px;

  white-space:
    nowrap;

  text-overflow:
    ellipsis;

  font-size:
    9px;

  font-weight:
    800;

  box-shadow:
    inset
    0
    -5px
    8px
    rgba(
      0,
      0,
      0,
      .08
    );

}



/* =====================================================
   CHURRASCARIA_MAIS_OPCOES_CSS_V1
===================================================== */


/* =====================================================
   MAIS OPÇÕES
===================================================== */

.janela-modal.mais-opcoes {

  width:
    690px;

}


.mais-opcoes-grade {

  display:
    grid;

  grid-template-columns:
    1fr 1fr;

  gap:
    10px;

  padding:
    18px;

}


.opcao-comanda {

  min-height:
    82px;

  display:
    grid;

  grid-template-columns:
    50px 1fr;

  align-items:
    center;

  gap:
    10px;

  padding:
    10px 12px;

  text-align:
    left;

  color:
    #252525;

  background:
    #fff;

  border:
    1px solid #c8ccd0;

  cursor:
    pointer;

}


.opcao-comanda:hover:not(:disabled) {

  border-color:
    #e06b24;

  background:
    #fff6ed;

}


.opcao-comanda > span {

  width:
    44px;

  height:
    44px;

  display:
    grid;

  place-items:
    center;

  color:
    white;

  border-radius:
    6px;

  background:
    #555;

  font-size:
    25px;

  font-weight:
    700;

}


.opcao-comanda.transferir > span {

  background:
    #e06b24;

}


.opcao-comanda.copiar > span {

  background:
    #3c74b8;

}


.opcao-comanda.resumo > span {

  background:
    #558b2f;

}


.opcao-comanda.bloqueio > span {

  background:
    #b12a24;

}


.opcao-comanda.historico > span {

  background:
    #6a4ba1;

}


.opcao-comanda.futuro {

  opacity:
    .48;

  cursor:
    not-allowed;

}


.opcao-comanda strong {

  display:
    block;

  margin-bottom:
    3px;

  font-size:
    12px;

}


.opcao-comanda small {

  color:
    #777;

  font-size:
    10px;

}


.rodape-mais-opcoes {

  min-height:
    52px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  padding:
    8px 18px;

  background:
    #f0f1f2;

  border-top:
    1px solid #cfd3d6;

  font-size:
    11px;

}


/* =====================================================
   TRANSFERÊNCIA / CÓPIA
===================================================== */

.janela-modal.mover-itens {

  width:
    min(
      92vw,
      820px
    );

}


#formMoverItens {

  padding:
    17px;

}


.destino-transferencia {

  display:
    grid;

  grid-template-columns:
    1fr 45px 1.5fr;

  align-items:
    end;

  gap:
    12px;

  padding:
    13px 15px;

  background:
    #eceff1;

  border:
    1px solid #d0d5d9;

}


.destino-transferencia small {

  display:
    block;

  margin-bottom:
    4px;

  color:
    #777;

  font-size:
    9px;

  font-weight:
    800;

}


.destino-transferencia strong {

  font-size:
    14px;

}


.destino-transferencia label {

  display:
    block;

}


.destino-transferencia select {

  width:
    100%;

  height:
    36px;

  padding:
    0 8px;

  color:
    #222;

  background:
    white;

  border:
    1px solid #abb2b8;

}


.seta-transferencia {

  align-self:
    center;

  color:
    #e06b24;

  text-align:
    center;

  font-size:
    28px;

  font-weight:
    700;

}


.titulo-selecao-itens {

  min-height:
    46px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  margin-top:
    13px;

}


.titulo-selecao-itens strong {

  font-size:
    12px;

}


.titulo-selecao-itens button {

  padding:
    6px 10px;

  color:
    #444;

  background:
    white;

  border:
    1px solid #bbb;

  font-size:
    10px;

}


.lista-mover-itens {

  max-height:
    340px;

  overflow:
    auto;

  border:
    1px solid #c8cdd1;

}


.lista-mover-itens table {

  width:
    100%;

  border-collapse:
    collapse;

}


.lista-mover-itens th {

  position:
    sticky;

  top:
    0;

  z-index:
    2;

  height:
    36px;

  padding:
    7px;

  color:
    white;

  background:
    #32373c;

  border-right:
    1px solid #535a60;

  font-size:
    10px;

}


.lista-mover-itens td {

  padding:
    8px;

  color:
    #222;

  background:
    white;

  border-bottom:
    1px solid #ddd;

  font-size:
    11px;

}


.lista-mover-itens tr:nth-child(even) td {

  background:
    #f6f7f8;

}


.mover-check {

  width:
    45px;

  text-align:
    center;

}


.mover-disponivel {

  width:
    90px;

  text-align:
    center;

}


.mover-quantidade {

  width:
    110px;

  text-align:
    center;

}


.mover-valor {

  width:
    100px;

  text-align:
    right;

}


.lista-mover-itens
input[type="checkbox"] {

  width:
    17px;

  height:
    17px;

}


.lista-mover-itens
input[type="number"] {

  width:
    80px;

  height:
    30px;

  padding:
    0 6px;

  text-align:
    right;

  border:
    1px solid #b6bcc1;

}


.aviso-transferencia {

  margin-top:
    12px;

  padding:
    10px 12px;

  color:
    #5c4b26;

  background:
    #fff4d9;

  border:
    1px solid #ead39d;

  font-size:
    10px;

}


#formMoverItens > footer {

  display:
    flex;

  justify-content:
    flex-end;

  gap:
    8px;

  margin-top:
    14px;

  padding-top:
    12px;

  border-top:
    1px solid #ddd;

}


#formMoverItens > footer button {

  min-height:
    38px;

  padding:
    0 16px;

}


/* =====================================================
   RESUMO DA CONTA
===================================================== */

.janela-modal.resumo-conta-modal {

  width:
    560px;

}


.resumo-conta-corpo {

  padding:
    18px;

}


.resumo-identificacao {

  display:
    grid;

  grid-template-columns:
    100px 130px 1fr;

  gap:
    10px;

  padding:
    12px;

  background:
    #eceff1;

  border:
    1px solid #d4d8dc;

}


.resumo-identificacao small {

  display:
    block;

  margin-bottom:
    3px;

  color:
    #777;

  font-size:
    8px;

  font-weight:
    800;

}


.resumo-identificacao strong {

  font-size:
    12px;

}


.resumo-valores {

  margin-top:
    15px;

  border:
    1px solid #d4d8dc;

}


.resumo-valores > div {

  min-height:
    42px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  padding:
    0 13px;

  border-bottom:
    1px solid #e0e3e5;

  font-size:
    11px;

}


.resumo-valores > div:last-child {

  border-bottom:
    0;

}


.resumo-total {

  color:
    white;

  background:
    #363b40;

  font-size:
    15px !important;

  font-weight:
    800;

}


.resumo-restante strong {

  color:
    #d52e24;

  font-size:
    17px;

}


.modal-footer-simples {

  min-height:
    52px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  padding:
    8px 16px;

  background:
    #f0f1f2;

  border-top:
    1px solid #cfd3d6;

}


/* =====================================================
   HISTÓRICO
===================================================== */

.janela-modal.historico-comanda-modal {

  width:
    min(
      90vw,
      760px
    );

}


.historico-comanda-lista {

  max-height:
    520px;

  min-height:
    250px;

  overflow:
    auto;

  padding:
    15px 18px;

}


.historico-item {

  position:
    relative;

  padding:
    0 0 16px 30px;

  border-left:
    2px solid #d7dadd;

}


.historico-item:last-child {

  border-left-color:
    transparent;

}


.historico-item::before {

  content:
    "";

  position:
    absolute;

  left:
    -6px;

  top:
    2px;

  width:
    10px;

  height:
    10px;

  border-radius:
    50%;

  background:
    #e06b24;

}


.historico-item strong {

  display:
    block;

  color:
    #333;

  font-size:
    11px;

}


.historico-item p {

  margin:
    4px 0;

  color:
    #555;

  font-size:
    11px;

}


.historico-item small {

  color:
    #8a8a8a;

  font-size:
    9px;

}



/* =====================================================
   CHURRASCARIA_IMPRESSAO_MODAL_CSS_V1
===================================================== */

.janela-modal.impressao-opcoes {

  width:
    690px;

}


.impressao-identificacao {

  display:
    grid;

  grid-template-columns:
    1fr 1fr;

  gap:
    10px;

  margin:
    16px 18px 0;

  padding:
    11px 14px;

  background:
    #eceff1;

  border:
    1px solid #d1d6da;

}


.impressao-identificacao small {

  display:
    block;

  color:
    #777;

  font-size:
    8px;

  font-weight:
    800;

}


.impressao-identificacao strong {

  display:
    block;

  margin-top:
    3px;

  color:
    #222;

  font-size:
    14px;

}


.impressao-grade {

  display:
    grid;

  grid-template-columns:
    1fr 1fr;

  gap:
    10px;

  padding:
    15px 18px;

}


.impressao-opcao {

  min-height:
    82px;

  display:
    grid;

  grid-template-columns:
    52px 1fr;

  align-items:
    center;

  gap:
    10px;

  padding:
    10px 12px;

  text-align:
    left;

  color:
    #252525;

  background:
    white;

  border:
    1px solid #c6cbd0;

  cursor:
    pointer;

}


.impressao-opcao:hover {

  border-color:
    #e16a22;

  background:
    #fff6ed;

}


.impressao-opcao > span {

  width:
    46px;

  height:
    46px;

  display:
    grid;

  place-items:
    center;

  color:
    white;

  border-radius:
    6px;

  font-size:
    24px;

}


.impressao-opcao.preconta > span {

  background:
    #d43930;

}


.impressao-opcao.resumo > span {

  background:
    #546e7a;

}


.impressao-opcao.bar > span {

  background:
    #1565c0;

}


.impressao-opcao.cozinha > span {

  background:
    #558b2f;

}


.impressao-opcao.churrasqueira > span {

  background:
    #c62828;

}


.impressao-opcao.ultimos > span {

  background:
    #6a1b9a;

}


.impressao-opcao strong {

  display:
    block;

  margin-bottom:
    3px;

  font-size:
    12px;

}


.impressao-opcao small {

  color:
    #777;

  font-size:
    10px;

}


.impressao-aviso {

  margin:
    0 18px 16px;

  padding:
    9px 11px;

  color:
    #5c4b26;

  background:
    #fff4d8;

  border:
    1px solid #ead49d;

  font-size:
    10px;

}