@import url('https://fonts.googleapis.com/css2?family=Alan+Sans:wght@300..900&display=swap');
* {
scrollbar-color: rgb(223, 227, 232) rgb(249, 250, 251);
scrollbar-width: thin;
box-sizing: border-box;
font-family: "Alan Sans", sans-serif;
outline: 0px;
box-sizing: border-box;
padding: 0px;
margin: 0px;
}
html, body, #root {
height: 100%;
background-color:#fff;
}
img{
max-width: 100%;
height:auto;
border:0;
outline: 0;
}
button, input, a, select{
outline: 0;
border:0;
text-decoration: none;
box-shadow: none;
}
.loading-pages{
position: fixed;
z-index:999;
top:0;
left:0;
display: flex;
align-items: center;
justify-content: center;
background-color: #F6EBD8;
transition:all .2s linear;
opacity: 0;
visibility: hidden;
width: 100%;
height: 100%;
}
.loading-pages.visible{
opacity: 1;
visibility: visible;
}
.loading-pages .text{
font-weight: 600;
color:#006133;
font-size: 18px;
margin-top:16px;
margin-bottom: 50px;
}
.animate-pulse {
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-30px);
  }
}

@keyframes pulse-scale-shadow {
  0%, 100% {
    transform: scale(1);
    filter: drop-shadow(0 0 0 rgba(219, 36, 30, 0));
  }
  50% {
    transform: scale(1.05);
    filter: drop-shadow(0 0 15px rgba(219, 36, 30, 0.6));
  }
}
@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: .5;
  }
}
.mainRoot{
position: relative;
width: 100%;
height: 100vh;
background-color: #f4f4f4;
display: flex;
align-items: stretch;
}
.mainRoot .sideMenu{
position: relative;
height: 100vh;
top: 0;
left: 0;
transition: all .2s linear;
z-index:9;
}
.mainRoot .bodyDash{
width:100%;
height:100vh;
position:relative;
flex:0 0 1;
overflow: auto;
}
.body-content-dash{
padding:30px;
}
.title-area-dash{
display: flex;
align-items: center;
justify-content: space-between;
margin:0 0 25px;
}
.title-area-dash h2{
font-size: 24px;
font-weight: 600;
margin:0;
}
.list-status{
width:100%;
height:calc(100vh - 60px);
padding:30px;
display: flex;
gap:20px;
}
.list-status-item{
width:312px;
height:100%;
}
.list-status-item .head-status{
display: flex;
align-items: center;
justify-content: space-between;
height:50px;
border-bottom: 1px solid rgb(221, 226, 235);
padding:0 16px;
}
.list-status-item .head-status .count{
width:22px;
height:22px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 500;
}
.list-status-item .head-status .name-status{
display:flex;
align-items: center;
gap:8px;
}
.list-status-item .head-status .name-status .icon{
width:22px;
height: 22px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.list-status-item .head-status .name-status .icon svg{
width:14px;
height:14px;
}
.list-status-item .head-status .name-status span{
font-weight: 600;
font-size: 18px;
color:rgb(48, 51, 60);
}
.content-status-orders{
height:calc(100% - 50px);
padding:16px;
overflow: auto;
}
.cardOrder svg{
margin-bottom: -1px;
}
.status-bag, .clientBag{
padding:2px 12px;
border-radius: 50px;
font-size: 13px;
font-weight: 500;
}
.nameClient{
display:flex;
align-items: center;
color: rgb(72, 84, 96);
font-size: 14px;
}
.nameClient svg{
width:18px;
height:20px;
margin-right:6px;
}
.nameClient span{
width:calc(100% - 24px);
}
.price-order{
color:rgb(48, 51, 60);
font-size: 16px;
font-weight: 700;
}

.modalOrder{
position: fixed;
z-index: 99;
background-color: rgba(13, 13, 13, 0.4);
width:100%;
height:100%;
left:0;
top:0;
display: none;
align-items: center;
justify-content: center;
margin:0 !important;
}
.modalOrder.active{
display:flex;
}
.modalOrder .content-modal-order{
width: 100%;
max-height: 90vh;
display: flex;
flex-direction: column;
max-width:800px;
background-color:#fff;
border-radius: 15px;
}
.modalOrder .content-modal-order .head-modal-order{
border-bottom: 1px solid rgb(221, 226, 235);
width:100%;
display: flex;
align-items: center;
justify-content: space-between;
height:60px;
padding:10px 10px;
}
.modalOrder .content-modal-order .head-modal-order .modal-status-order{
display: flex;
align-items: center;
justify-content: flex-end;
gap:10px;
}
.modalOrder .content-modal-order .head-modal-order .numberOrder{
font-weight: 600;
font-size: 16px;
color:rgb(48, 51, 60);
padding:0 10px;
}
.modalOrder .content-modal-order .head-modal-order .modal-status-order .closeModal{
width:40px;
height:40px;
cursor:pointer;
display: flex;
align-items:center;
justify-content: center;
}
.modalOrder .content-modal-order .head-modal-order .modal-status-order .closeModal svg{
fill:rgb(48, 51, 60);
}
.modalOrder .content-modal-order .body-modal-order{
padding:20px;
}
.modalOrder .content-modal-order .body-modal-order .client-infos{
display: flex;
align-items: center;
width:100%;
justify-content: space-between;
padding: 1rem;
margin-bottom: 1.5rem;
border-radius: 0.5rem;
border: 1px solid rgb(221, 226, 235);
}
.modalOrder .content-modal-order .body-modal-order .client-infos > div{
display: flex;
align-items:center;
gap:8px;
color:rgb(72, 84, 96);
font-weight: 500;
}
.modalOrder .content-modal-order .body-modal-order .client-infos > div a{
display: flex;
align-items:center;
gap:8px;
color:rgb(43, 0, 255);
text-decoration: underline;
}
.items-order .header{
display: flex;
align-items:center;
justify-content:space-between;
font-size: 14px;
font-weight: 600;
color:rgb(72, 84, 96);
}
.items-order .header > div:nth-child(1){
width:45px;
text-align: center;
padding-right:5px;
}
.items-order .header > div:nth-child(2){
width:calc(100% - 225px);
padding:0 5px;
}
.items-order .header > div:nth-child(3){
width:90px;
padding:0 5px;
}
.items-order .header > div:nth-child(4){
width:90px;
padding-left:5px;
}
.items-order .items .item-order{
display: flex;
align-items: flex-start;
justify-content: space-between;
background-color: rgb(247, 249, 250);
padding:5px 0;
border-radius: 7px;
margin-bottom:6px;
}
.items-order .items .item-order .item-order-body.qty{
width:45px;
padding-right:5px;
text-align: center;
font-size: 16px;
color:rgb(48, 51, 60);
}
.items-order .items .item-order .item-order-body.name{
width:calc(100% - 225px);
padding:0 5px;
font-size: 16px;
color:rgb(48, 51, 60);
}
.items-order .items .item-order .item-order-body.name ul li{
font-size: 13px;
color:rgb(127, 143, 159);
line-height: 16px
}
.items-order .items .item-order .item-order-body.price{
width:90px;
padding:0 5px;
font-size: 16px;
color:rgb(48, 51, 60);
}
.items-order .items .item-order .item-order-body.price:nth-of-type(2){
padding-right:0;
padding-left:5px;
}
.totaisOrder{
padding-top:15px;
}
.totaisOrder .subtotal, .totaisOrder .total{
display: flex;
align-items: center;
justify-content: flex-end;
gap:10px;
font-size: 16px;
color:rgb(48, 51, 60);
padding:2px 0;
}
.totaisOrder .subtotal span{
color: rgb(127, 143, 159);
font-size:14px;
font-weight:500
}
.totaisOrder .total span{
color: rgb(127, 143, 159);
font-size:16px;
font-weight:500
}
.modalOrder .content-modal-order .footer-modal-order{
border-top: 1px solid rgb(221, 226, 235);
width:100%;
display: flex;
align-items: center;
justify-content: flex-end;
height:60px;
padding:10px 20px;
}
button.btn-imprimir{
border:1px solid rgb(127, 143, 159);
color:rgb(127, 143, 159);
height:40px;
padding:5px 20px;
border-radius:5px;
transition:all .2s linear;
}
button.btn-imprimir:hover{
background-color: rgb(127, 143, 159);
border-color:rgb(101, 118, 134);
color:rgb(255,255,255);
}
.cardOrder:hover .contentOrder{
background-color:oklch(97.1% 0.013 17.38);
}
.cardOrder:hover > svg path{
fill:oklch(97.1% 0.013 17.38);
}
label.label-switch{
width:48px;
height:24px;
transition: all .2s linear;
border-radius:99px;
background-color: oklch(87.2% 0.01 258.338);
position:relative;
display:block;
cursor: pointer;
}
label.label-switch span{
display: block;
position:absolute;
width:16px;
height:16px;
border-radius: 50%;
top: .25rem;
left: .25rem;
background-color: #fff;
transition: all .2s linear;
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
transform: translateX(0);
}
input:checked + label.label-switch{
background-color: oklch(72.3% 0.219 149.579);
}
input:checked + label.label-switch span{
transform: translateX(calc(.25rem*6));
}


@media print {
    /* 1. ESCONDE TUDO na página. */
    body > * {
        visibility: hidden !important;
        display: none !important; /* Adiciona display: none para garantir */
    }

    /* 2. MOSTRA APENAS O RECIBO E SEU CONTEÚDO. */
    .print-receipt-only, 
    .print-receipt-only * {
        visibility: visible !important;
        display: block !important;
    }
    
    /* 3. POSICIONA o recibo no topo da página de impressão. */
    .print-receipt-only {
        position: absolute; /* ou fixed */
        left: 0;
        top: 0;
        width: 80mm; /* GARANTE A LARGURA DO PAPEL TÉRMICO (ex: 80mm) */
        margin: 0;
        padding: 0;
        
        /* Opcional: Fonte para recibo */
        font-family: 'Consolas', 'Courier New', monospace;
        font-size: 10pt;
    }
}