@media print {

    .no-print,
    .alertify,
    .alertify-notifier,
    .ajs-notifier,
    .ajs-message,
    .ajs-modal,
    .ajs-dimmer,
    .ajs-dialog {
        display: none !important;
        visibility: hidden !important;
    }

}


/*================= TRANSIÇÃO SUAVE PARA TODOS OS MODAIS =================*/
#PedidoModal .modal-dialog {
  transition: all 0.5s ease; /* efeito suave ao mudar tamanho */
}

/*exemplo de uso:  <span class="box amareloNeutro">Ativo</span> */


.box {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 4px;
  line-height: 1;
}



.amareloNeutro {
  border: 2px solid #fff3cd;
  background-color: #fff3cd;
  color: #856404;
}

.azulNeutro {
  border: 2px solid #e0f2ff;
  background-color: #e0f2ff;
  color: #56769b;
}

.cinzaNeutro {
  border: 2px solid #ebebeb;
  background-color: #ebebeb;
  color: #808080;
}

.verdeNeutro {
  border: 2px solid #d8fdcd;
  background-color: #d8fdcd;
  color: #4f893e;
}

.vermelhoNeutro {
  border: 2px solid #f7e9e9;
  background-color: #f7e9e9;
  color: #a45151;
}






.amareloForte {
  border: 2px solid #d7d022;
  background-color: #d7d022;
  color: white;
}


.azulForte {
  border: 2px solid #56769b;
  background-color: #56769b;
  color: white;
}

.cinzaForte {
  border: 2px solid #808080;
  background-color: #808080;
  color: white;
}

.verdeForte {
  border: 2px solid #4f893e;
  background-color: #4f893e;
  color: white;
}

.vermelhoForte {
  border: 2px solid #a45151;
  background-color: #a45151;
  color: white;
}








.outlineAmarelo {
  background: transparent;
  border: 2px solid #9d9b5d;
  color: #9d9b5d;
}

.outlineAzul {
  background: transparent;
  border: 2px solid #56769b;
  color: #56769b;
}

.outlineVerde {
  background: transparent;
  border: 2px solid #4f893e;
  color: #4f893e;
}

.outlineVermelho {
  background: transparent;
  border: 2px solid #a45151;
  color: #a45151;
}




.btn-verdeNeutro {
  background-color: #d8fdcd;
  color: #000;
  transition: background-color 0.2s; /* efeito suave */
}

.btn-verdeNeutro:hover {
  background-color: #b5f0a8; /* versão um pouco mais escura */
  cursor: pointer;
}



.btn-azulNeutro {
  background-color: #e0f2ff;
  color: #000;
  transition: background-color 0.2s; /* efeito suave */
}

.btn-azulNeutro:hover {
  background-color: #bad5e9; /* versão um pouco mais escura */
  cursor: pointer;
}



.btn-cinzaNeutro {
  background-color: #ebebeb;
  color: #000;
  transition: background-color 0.2s; /* efeito suave */
}

.btn-cinzaNeutro:hover {
  background-color: #dcdcdc; /* versão um pouco mais escura */
  cursor: pointer;
}





/*textos */

.txtVerdeNeutro {
  color: #d8fdcd;
}

.txtAmareloNeutro {
  color: #f1efb9;
}

.txtAzulNeutro {
  color: #e0f2ff;
}

.txtVerdeNeutro {
  color: #d8fdcd;
}

.txtVermelhoNeutro {
  color: #f1dbdb;
}





.txtAmareloMedio {
  color: WHITE;
}

.txtAzulMedio {
  color: WHITE;
}

.txtVerdeMedio {
  color: WHITE;
}

.txtVermelhoMedio {
  color: #e19999;
}




.txtAmareloForte {
  color: #9d9b5d;
}

.txtAzulForte {
  color: #56769b;
}

.txtVerdeForte {
  color: #4f893e;
}

.txtVermelhoForte {
  color: #a45151;
}


.bolinhaVerde {
    display: inline-block;
    width: 10px;
    height: 10px;
    background-color: #4f893e;
    border-radius: 50%;
    box-shadow: 0 0 4px rgba(25, 135, 84, 0.5);
    vertical-align: middle;
}

.bolinhaVermelha {
    display: inline-block;
    width: 10px;
    height: 10px;
    background-color: #a45151;
    border-radius: 50%;
    box-shadow: 0 0 4px rgba(25, 135, 84, 0.5);
    vertical-align: middle;
}

/* LOADING OVERLAY*/
/* Overlay global com centro escuro e bordas transparentes */
#gOverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex; /* mantemos flex para centralizar spinner */
  justify-content: center;
  align-items: center;
  z-index: 9999;
  /* Gradiente radial: centro preto, bordas transparentes */
  background: rgba(0,0,0,0.2);
  
  opacity: 0;               /* invisível inicialmente */
  pointer-events: none;     /* não bloqueia clique enquanto invisível */
  transition: opacity 0.4s ease, top 0.2s ease, height 0.2s ease;
}

/* Spinner */
#gOverlay .spinner {
  width: 50px;
  height: 50px;
  border: 5px solid #fff;
  border-top: 5px solid transparent;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}




/*================= BTN DENTRO DO BTN BUSCAR =================*/

/* BTN DENTRO DO INPUT

  <div class="search-container">
    <input type="text" class="form-control" placeholder="Buscar por nº da venda..." id="buscarvendaMenu">
    <span class="search-icon"><i class="bi bi-search"></i></span>
  </div>

  */



.btn-container {
  position: relative;
  display: inline-block;
  width: 100%; /* opcional: faz o input ocupar toda a largura da coluna */
}

.btn-container input {
  padding-right: 30px; /* espaço para o ícone à direita */
  height: 40px; /* ajuste da altura do input */
}

.btn-icon {
  position: absolute;
  right: 10px; /* coloca na direita */
  top: 50%;
  transform: translateY(-50%);
  color: #888;
  cursor: pointer;
}



/* Hover para todas as linhas "parent" */
table.dataTable tbody tr {
  transition: background-color 0.15s ease;
}

table.dataTable tbody tr:hover {
  background-color: #979797 !important;
}

/* Ajuste para linhas "child" do responsive */
table.dataTable.dtr-inline.collapsed > tbody > tr.child {
  background-color: #d6d6d6; /* cinza mais claro para os detalhes */
}


.container-95 {
    width: 95%;
    max-width: 95%;
    margin-left: auto;
    margin-right: auto;
}

/* ===============================
   UI EXPANDER - CLEAN TOTAL
================================ */

.ui-expander {
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    background: #ffffff;
    overflow: hidden;
    margin-bottom: 12px;
}

/* HEADER */
.ui-expander-header {
    background: #ffffff;
    padding: 16px;
    cursor: pointer;
    font-weight: 600;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Linha separadora apenas quando aberto */
.ui-expander.open .ui-expander-header {
    border-bottom: 1px solid #e5e5e5;
}

/* Ícone */
.ui-expander-chevron {
    transition: transform 0.3s ease;
}

/* BODY */
.ui-expander-body {
    display: none;
    padding: 16px;
    background: #ffffff;
}

/* Estado aberto */
.ui-expander.open .ui-expander-body {
    display: block;
}

.ui-expander.open .ui-expander-chevron {
    transform: rotate(180deg);
}

/* Variação de destaque do expander */
.ui-expander.vermelhoForte > .ui-expander-header,
.ui-expander.vermelhoForte > .ui-expander-header:hover,
.ui-expander.vermelhoForte > .ui-expander-header:focus {
    background: #a45151 !important;
    color: #ffffff !important;
}

.ui-expander.vermelhoForte.open > .ui-expander-header {
    border-bottom-color: #8f4545 !important;
}

.ui-expander.vermelhoForte > .ui-expander-body {
    background: #a45151;
    color: #ffffff !important;
}

.ui-expander.vermelhoForte > .ui-expander-body .card {
    color: #212529;
}

.ui-expander.vermelhoForte > .ui-expander-body > .text-muted,
.ui-expander.vermelhoForte > .ui-expander-body > div > .text-muted {
    color: rgba(255, 255, 255, 0.85) !important;
}

@media (min-width: 1200px) {
    .inicio-coluna-expansivel {
        transition: width 400ms ease-in-out;
    }
}




.foto-produto {
    max-width: 100%;   /* não ultrapassa o container */
    max-height: 120px; /* altura máxima */
    object-fit: contain; /* mantém proporção sem distorcer */
    border-radius: 4px;
    display: block;
}


.badge-novo {
    position: absolute;
    top: 15px;
    left: 5px;

    background-color: #4f893e;
    color: #fff;

    font-size: 0.75rem;
    font-weight: 600;

    padding: 3px 10px;
    display: inline-block;

    border-radius: 5px; /* 👈 borda arredondada */

    z-index: 999;
}

.badge-promocao {
    position: absolute;
    top: 15px;
    left: 5px;

    background-color: #ff9800;
    color: #fff;

    font-size: 0.7rem;
    font-weight: bold;

    padding: 4px 8px;

    border-radius: 4px;

    z-index: 999;
}

/* Se existir badge-novo antes */
.badge-novo + .badge-promocao {
    top: 45px;
}


.faixa-loja {
  position: absolute;
  top: 50%;
  left: 50%;

  width: 50%;

  text-align: center;
  
  transform: translate(-50%, -50%) rotate(-12deg);

  background: rgba(0, 0, 0, 0.08);
  color: #444;

  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;

  padding: 6px 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.7;
}

/* Wrapper para posicionar badge sobre a foto */
.foto-wrapper {
    position: relative;
    display: inline-block;
}