@charset "UTF-8";
.ImagenGrillaProducto{
    height:200px !important;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    cursor:pointer;
}

Body{
    background-color: #f3f0f0 !important;
}
.page-id-ordenometro {
    display: none;
}

.hidden-page{
    display: none !important;
}

.TextDescProd{
    height:80px !important;
    display: inline-block;
    text-overflow: ellipsis;
    font-size:14px !important;
    word-wrap: break-word;
    overflow: hidden;
    max-height: 3.6em;
    line-height: 1.8em;
    color: #1d1d1d!important;
    text-align: center !important;
    align-content: center !important;
}
.InputCarrito{
    padding:0 !important;
    border-radius: 5px !important;
    border: 1px solid !important;
    border-color:#AAAAAA!important;
    height:28px!important;
}
.ImagenCarrito{
    height:200px !important;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    cursor:pointer;
}
.slick-prev{
    opacity:1 !important;
    visibility:visible !important;
    background-color: #ff8c42 !important;
    color: white !important;
}
.slick-prev:hover{
    background-color: #ff7519 !important;
}
.slick-next{
    opacity:1 !important;
    visibility:visible !important;
    background-color: #ff8c42 !important;
    color: white !important;
}
.slick-next:hover{
    background-color: #ff7519 !important;
}

.DivProductBlock{
    margin: 0% !important;
    top: 0% !important;
    padding: 0% !important;
}
.page-id-ordenometro{
    padding: 0%!important;
    margin: 0%!important;
    margin-top: 1%!important;
    min-width: 100% !important;
    max-width: 100% !important;
}
.HeaderRRSSIcon{
    min-width: 30px!important;
    max-width: 30px!important;
    margin: 0%!important;
    padding: 0%!important;
}

.HeaderLogo{
    cursor: pointer !important;
}
.SelectBuscadorRRSS{
    float: right !important;
}
.NavBlueMenu{
    background:#1f2c87 !important;
    display: inline;
    min-width: 100% !important;
    max-width: 100% !important;
}
.SelectBuscadorBtnHeader{
    background-color: #1d1d1d !important;
    color: #ffffff !important;
    padding-top: 1% !important;
    padding-bottom: 1% !important;
    text-align: center !important;
    align-content: center !important;
    cursor: pointer !important;
    max-height: 40px !important;
    border-radius: 5px !important;
    font-size: large !important;
    font-weight: bold !important;
}
.SelectBuscadorHeader{
    float: right !important;
    margin-left: 0% !important;
    margin-right: 0% !important;
    padding-left: 3px !important;
    padding-right: 3px !important;
}
.DropDownProduct:hover .MegaMenuProdct {display: block;}
.HeaderMobilCarrito{
    padding-left: 2px !important;
    padding-right: 2px !important;
    padding-top: 1% !important;
    padding-bottom: 1% !important;
    border: solid 1px #ffffff !important;
    border-radius: 2% !important;
    text-align: center !important;
    align-content: center !important;
    min-width: auto !important;
    max-width: auto !important;
    font-size : 2.8vw;
    float: right !important;
}
.NvarBoton3{
    padding-left: 1% !important;
    padding-right: 1% !important;
    margin-top: 8px !important;
    margin-bottom: 8px !important;
    border-right: solid 1px #ffffff;
    min-width: auto !important;
    max-width: auto !important;
    font-size: large !important;
    color: #ffffff;
    cursor: pointer;
    float: right;
}
.NvarBoton4{
    padding-left: 1% !important;
    padding-right: 1% !important;
    margin-bottom: 8px !important;
    border-right: solid 1px #ffffff;
    min-width: auto !important;
    max-width: auto !important;
    font-size: large !important;
    color: #ffffff;
    cursor: pointer;
    float: left;
}
.NvarBoton2{
    padding-left: 1% !important;
    padding-right: 1% !important;
    margin-top: 8px !important;
    margin-bottom: 8px !important;
    border-right: solid 1px #ffffff;
    min-width: auto !important;
    max-width: auto !important;
    font-size: large !important;
    color: #ff9a52;
    cursor: pointer;
    float: right;
}
.NvarBoton2:hover{
    color: #f33535 !important;
}
.NvarBoton5{
    padding-left: 1% !important;
    padding-right: 1% !important;
    margin-top: 8px !important;
    margin-bottom: 8px !important;
    min-width: auto !important;
    max-width: auto !important;
    font-size: large !important;
    color: #ff9a52;
    cursor: pointer;
    float: right;
}
.NvarBoton5:hover{
    color: #f33535 !important;
}
.NvarBoton1{
    padding-left: 1% !important;
    padding-right: 1% !important;
    margin-top: 8px !important;
    margin-bottom: 8px !important;
    border-right: solid 1px #ffffff;
    min-width: auto !important;
    max-width: auto !important;
    font-size: large !important;
    color: #ffffff;
    cursor: pointer;
}
.NvarBoton1:hover{
    color: #ff9a52 !important;
}
.BtnMobilCarrito {
    color: #ffffff !important;
    border-radius: 10px !important;
    border: 2px solid #ffffff;
    cursor:pointer !important;
    width: auto !important;
    float: right !important;
    margin-right: 6% !important;
    margin-top: 3% !important;
}
.HeaderMobilLogo{
    padding: 0% !important;
    margin: 0% !important;
    max-width: 150px !important;
}
.HeaderMobil{
    padding-top: 2%;
    background-color: #1f2c87 !important;
    height: auto !important;
    color: #ffffff!important;
    min-width: 110% !important;
    max-width: 110% !important;

}

.BotonCerrarMobil{
    padding: 2% !important;
    color:#bbbbbb!important;
    cursor: pointer;
}

#sidebarMenuMobil {
    position: absolute;
    top: 0px;
    left: -220px;
    width: 220px;
    display: block !important;
    background: #1f2c87;
    transition: all 300ms linear;
}

.sidebarMenuMobilActive {
left:0 !important;
}

#sidebarMenuMobil div.list div.item {
padding:15px 10px;
color:#ffffff;
text-transform:uppercase;
font-size:14px;
}

.itemProducto {
cursor: pointer !important;
padding:5%;
color: #1f2c87 !important;
text-transform:uppercase;
font-size:15px;
background-color: #ff9a52!important;
font-weight:900 !important;
font-family: "Arial Black";
}

.itemProducto :hover{
    color: red !important;
    border-left: 2px solid #ff9a52 !important;
}
#sidebarMenuMobil div.list div.item a{
color:#ffffff;
text-decoration: none;
}

.BotonMenuPrincipal {
    font-family: Arial;
    display: block;
    margin: 1% 0% 1% 0%;
    padding: 0% 1% 0% 1%;
    text-align: center;
    font-size: 16px;
    font-weight: normal;
    text-transform: uppercase;
    color: #ffffff !important;
    float: left !important;
    cursor:pointer !important;
}

.BotonMenuPrincipal:hover{
    color: #ff9a52 !important;
}

.BotonCarruselFlecha{
    color: #1f2c87 !important;
    font-weight: bold !important;
}
.carousel-control 			 { width:  4% !important; }
.carousel-control.left,.carousel-control.right {margin-left:15px!important;background-image:none!important;}


@media (max-width: 767px) {
	.carousel-inner .active.left { left: -100%!important; }
	.carousel-inner .next        { left:  100%!important; }
	.carousel-inner .prev		 { left: -100%!important; }
	.active > div { display:none!important; }
	.active > div:first-child { display:block!important; }

}
@media (min-width: 767px) and (max-width: 992px ) {
	.carousel-inner .active.left { left: -50%!important; }
	.carousel-inner .next        { left:  50%!important; }
	.carousel-inner .prev		 { left: -50%!important; }
	.active > div { display:none!important; }
	.active > div:first-child { display:block!important; }
	.active > div:first-child + div { display:block!important; }
}
@media (min-width: 992px ) {
	.carousel-inner .active.left { left: -25%!important; }
	.carousel-inner .next        { left:  25%!important; }
	.carousel-inner .prev		 { left: -25%!important; }
}

.MultiCarousel {
    float: left;
    overflow: hidden;
    padding: 15px;
    width: 100%;
    position:relative;
}

.MultiCarousel
.MultiCarousel-inner {
    transition: 1s ease all;
    float: left;
}

.MultiCarousel
.MultiCarousel-inner
.item {
    float: left;
    margin: 0% !important;
    padding: 10px !important;
}

.MultiCarousel
.leftLst,
.MultiCarousel
.rightLst {
    position:absolute;
    top:calc(50% - 20px);
    color: #1f2c87;

}

.MultiCarousel
.leftLst {
    left:0;

}

.MultiCarousel
.rightLst {
    right:0;
}

.contenedorBoxLoading{
    display: inline-block;
    display: flex;
    justify-content: center;
    align-items: center;
}

.BoxLoading{
width: 300px;
height: 300px;
background: #1f2c87;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 4px 4px 20px rgba(0,0,0,0.3);
border-radius: 50%;
}

.containerBoxLoading{
height: 15px;
width: 105px;
display: flex;
position: relative;
}

.circleBoxLoading{
width: 15px;
height: 15px;
animation: move 500ms linear 0ms infinite;
margin-right: 30px;
}

.circleBoxLoading:first-child{
position: absolute;
top:0;
left:0;
animation: grow 500ms linear 0ms infinite;
}

.circleBoxLoading:last-child{
position: absolute;
top: 0;
right: 0;
margin-right: 0;
animation: grow 500ms linear 0s infinite reverse;
}


@keyframes grow {
from {transform: scale(0,0); opacity: 0;}
to {transform: scale(1,1); opacity: 1;}
}

@keyframes move {
from {transform: translateX(0px)}
to {transform: translateX(45px)}
}

.chat {
    float: left;
    position: fixed;
    z-index: 9999999!important;
    left: 0;
    bottom: 10%;
    top: 57%!important;
}

.BackFacebook {
    background-color: #4267b2;
    border-radius: 5px!important;
    padding: 10px!important;
    margin-left: 2px;
    color: #ffffff;
}

.BackWhatsapp {
    background-color: #25d366;
    border-radius: 5px!important;
    padding: 10px!important;
    margin-left: 2px;
    color: #ffffff;
}

.BotonMenuCelular{
padding: 10px 20px;
background-color: #fff;
color: #1d1d1d;
font-size: 14px;
text-transform: uppercase;
font-weight: 700;
line-height: 24px;
width: 100%;
text-align: left;
border: 2px solid #eee;
border-radius: 5px;
position: relative;
font-family: Gilroy-Bold ☞;
}

.containerEco{
    margin-left:auto;
    margin-right:auto;
    padding-top: 20px !important;
    border-radius: 25px !important;
}

.DivEspacioMenu{
    padding-left:10% !important;
    padding-right:10%!important;
    width:100% !important;
    max-width:100% !important;
}

.DivDetalleAgregar{
    display: inline !important;
}

.CatnAgregados {
    border-radius: 50%;
    width: 35px;
    height: 35px;
    padding-top: 9px;
    background: #fff;
    border: 1px solid #1f2c87 ;
    color: #1f2c87 ;
    text-align: center;
    font: 12px Arial, sans-serif;
    float: right;
}

.BtnAgregarCarro {
    padding-bottom: 2%;
    padding-left: 2%;
    padding-right: 2%;
    background-color: #1f2c87;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    border-style: none;
    color: #fff;
    cursor: pointer;
    width: 30px;
    max-height: 25px;
}


input.Form1AddCantHide, select.Form1AddCant {
    width: 25%;
    padding: 1%;
    border: 1px solid #ffffff;
    background-color: #ffffff;
    margin-left: 10px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    margin-bottom: 2%;
}

input.Form1AddCant, select.Form1AddCant {
    width: 25%;
    padding: 1%;
    border: 1px solid #ccc;
    margin-left: 10px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    margin-bottom: 2%;
}
.RibDescuento1 {
	position: absolute;
	z-index: 1;
	overflow: hidden;
	padding-left: 2%;
	padding-right: 2%;
	text-align: right;
	font-size: 13px;
	font-weight: bold;
	color: #FFF;
	text-align: center;
	box-shadow: 0 3px 10px -5px rgb(0 0 0);
	height: 20px;
	margin-left: 1%;
}
.RibDescuento2 {
	position: absolute;
	z-index: 1;
	overflow: hidden;
	padding-left: 2%;
	padding-right: 2%;
	text-align: right;
	font-size: 13px;
	font-weight: bold;
	color: #FFF;
	text-align: center;
	box-shadow: 0 3px 10px -5px rgb(0 0 0);
	height: 20px;
	margin-left: 1%;
    background-color: #FF0040!important;
}
.RibDescuento3 {
	position: absolute;
	z-index: 1;
	overflow: hidden;
	padding-left: 2%;
	padding-right: 2%;
	text-align: right;
	font-size: 13px;
	font-weight: bold;
	color: #FFF;
	text-align: center;
	box-shadow: 0 3px 10px -5px rgb(0 0 0);
	height: 20px;
	margin-left: 1%;
}
.RibDescuento4 {
	position: absolute;
	z-index: 1;
	overflow: hidden;
	padding-left: 2%;
	padding-right: 2%;
	text-align: right;
	font-size: 13px;
	font-weight: bold;
	color: #ffffff!important;
	text-align: center;
	box-shadow: 0 3px 10px -5px rgb(0 0 0);
	height: 20px;
	margin-left: 1%;
}
.RibSinCanje1 {
    position: relative;
    font-size: 15px;
    font-weight: bold;
    color: #FFF;
    text-align: center;
    background-color: #FF0040;
    width: 100% !important;
    bottom: -50% !important;
    margin-left: 1% !important;
    margin-right: 1% !important;
    -webkit-transform: rotate(-50deg);
}
.RibSinCanje2 {
    position: relative;
    font-size: 15px;
    font-weight: bold;
    color: #FFF;
    text-align: center;
    background-color: #FF0040;
    width: 100% !important;
    bottom: -50% !important;
    margin-left: 1% !important;
    margin-right: 1% !important;
    -webkit-transform: rotate(-50deg);
}
.RibSinCanje3 {
    position: relative;
    font-size: 15px;
    font-weight: bold;
    color: #FFF;
    text-align: center;
    background-color: #FF0040;
    width: 100% !important;
    bottom: -50% !important;
    margin-left: 1% !important;
    margin-right: 1% !important;
    /*-webkit-transform: rotate(-50deg);*/
}
.RibSinCanjeCarrito1 {
    position: relative;
    font-size: 10px;
    font-weight: bold;
    color: #FFF;
    text-align: center;
    background-color: #FF0040;
    -webkit-transform: rotate(-50deg);
}
.RibSinCanje3 {
    position: relative;
	z-index: 1;
	overflow: hidden;
	text-align: right;
	font-size: 13px;
	font-weight: bold;
	color: #FFF;
	text-align: center;
    background-color: #FF0040;
	box-shadow: 0 3px 10px -5px rgb(0 0 0);
}

/*
.containerEco{min-height:100%}
*/
@media only screen and (min-width: 5px) and (max-width: 340px) {
    .RibSinCanje1 {
        font-size: 10px;
        width: 100% !important;
        bottom: -50% !important;
        margin-left: 1% !important;
        margin-right: 1% !important;
    }
    .RibSinCanje2 {
        width: 90% !important;
        bottom: -50% !important;
        margin-left: 1% !important;
        margin-right: 1% !important;
        left: 5% !important;
    }
    .LogoHeaderNoticia{
        width: 100%!important;
    }
    .SliderImagen1{
        display: none !important;
    }
    .SliderImagen2{
        display: block !important;
    }
    .SliderVideo1{
        display: none !important;
    }
    .SliderVideo2{
        display: block !important;
    }
    .BotonCerrarMobil{
        margin-left: 3%!important;
    }
    .SelectBuscadorRRSS{
        display: none !important;
    }
    .SelectBuscadorBtnHeader{
        margin-top: 2% !important;
    }
    .NavBlueMenu{
        display: none !important;
    }
    .HeaderMobilCarrito {
        margin-right: 6% !important;
        margin-top: 1% !important;
    }
    .HeaderLogo{
        display: none !important;
    }
    .HeaderMobil{
        display: block !important;
        padding-left: 3%!important;
    }
    .MargenHeader {
        margin-top: 2%!important;
        margin-left: 4% !important;
    }
    .slider-height {
        max-height: 605px !important;
    }
    .RibSinCanjeCarrito1{
        bottom: -40% !important;
        width:auto !important;
        left: 10% !important;
        padding: 1% !important;
    }
    .DivProductBlock{
        min-width: 48% !important;
        max-width: 48% !important;
    }
    .containerEco {
        width:90% !important;
    }
    .SelectBuscadorHeader {
        margin-top:2%!important;
    }
    .CssSlider{
        margin-top:1%!important;
    }
    .MultiCarousel{
        margin-top:1%!important;
    }
}

@media only screen and (min-width: 341px) and (max-width: 500px) {
    .RibSinCanje2 {
        width: 60% !important;
        bottom: -50% !important;
        margin-left: 1% !important;
        margin-right: 1% !important;
        left: 20% !important;
    }
    .LogoHeaderNoticia{
        width: 90%!important;
    }
    .SliderImagen1{
        display: none !important;
    }
    .SliderImagen2{
        display: block !important;
    }
    .SliderVideo1{
        display: none !important;
    }
    .SliderVideo2{
        display: block !important;
    }
    .SelectBuscadorRRSS{
        display: none !important;
    }
    .NavBlueMenu{
        display: none !important;
    }
    .SelectBuscadorBtnHeader{
        margin-top: 1% !important;
    }
    .HeaderMobilCarrito {
        margin-right: 8% !important;
        margin-top: 2% !important;
    }
    .HeaderLogo{
        display: none !important;
    }
    .HeaderMobil{
        display: block !important;
        padding-left: 3%!important;
    }
    .MargenHeader {
        margin-top: 2%!important;
        margin-left: 5% !important;
    }
    .slider-height {
        max-height: 605px !important;
    }
    .RibSinCanjeCarrito1{
        bottom: -35% !important;
        width: auto !important;
        left: 10% !important;
        padding: 1% !important;
    }
    .DivProductBlock{
        min-width: 49% !important;
        max-width: 49% !important;
    }
    .containerEco {
        width:90% !important;
    }
    .SelectBuscadorHeader {
        padding-top:1%!important;
    }
    .CssSlider{
        margin-top:1%!important;
    }
}

@media only screen and (min-width: 501px) and (max-width: 620px) {
    .RibSinCanje1 {
        font-size: 15px;
        width: 80% !important;
        bottom: -50% !important;
        margin-left: 1% !important;
        margin-right: 1% !important;
        left: 12% !important;
    }
    .RibSinCanje2 {
        width: 50% !important;
        bottom: -50% !important;
        margin-left: 1% !important;
        margin-right: 1% !important;
        left: 25% !important;
    }
    .LogoHeaderNoticia{
        width: 80%!important;
    }
    .SliderImagen1{
        display: none !important;
    }
    .SliderImagen2{
        display: block !important;
    }
    .SliderVideo1{
        display: none !important;
    }
    .SliderVideo2{
        display: block !important;
    }
    .SelectBuscadorRRSS{
        display: none !important;
    }
    .NavBlueMenu{
        display: none !important;
    }
    .SelectBuscadorBtnHeader{
        margin-top: 1% !important;
    }
    .HeaderMobilCarrito {
        margin-right: 8% !important;
        margin-top: 2% !important;
    }
    .HeaderLogo{
        display: none !important;
    }
    .HeaderMobil{
        display: block !important;
        padding-top: 1% !important;
        padding-left: 3%!important;
    }
    .MargenHeader {
        margin-top: 1%!important;
        margin-left: 2% !important;
    }
    .slider-height {
        max-height: 605px !important;
    }
    .RibSinCanjeCarrito1{
        bottom: -35% !important;
        width: auto !important;
        padding: 1% !important;
        left: 25% !important;
    }
    .DivProductBlock{
        min-width: 49% !important;
        max-width: 49% !important;
    }
    .containerEco {
        width:95% !important;
    }
    .SelectBuscadorHeader {
        padding-top:1%!important;
    }
    .CssSlider{
        margin-top:1%!important;
    }
}

@media only screen and (min-width: 621px) and (max-width: 820px) {
    .RibSinCanje1 {
        font-size: 15px;
        width: 70% !important;
        bottom: -50% !important;
        margin-left: 1% !important;
        margin-right: 1% !important;
        left: 15% !important;
    }
    .RibSinCanje2 {
        width: 50% !important;
        bottom: -50% !important;
        margin-left: 1% !important;
        margin-right: 1% !important;
        left: 25% !important;
    }
    .LogoHeaderNoticia{
        width: 70%!important;
    }
    .SliderImagen1{
        display: none !important;
    }
    .SliderImagen2{
        display: block !important;
    }
    .SliderVideo1{
        display: none !important;
    }
    .SliderVideo2{
        display: block !important;
    }
    .SelectBuscadorRRSS{
        display: none !important;
    }
    .NavBlueMenu{
        display: none !important;
    }
    .SelectBuscadorBtnHeader{
        margin-top: 1% !important;
    }
    .HeaderMobilCarrito {
        margin-right: 10% !important;
        margin-top: 1% !important;
    }
    .HeaderLogo{
        display: none !important;
    }
    .HeaderMobil{
        display: block !important;
        padding-top: 1% !important;
        padding-left: 3%!important;
    }
    .MargenHeader {
        margin-top: 1%!important;
        margin-left: 2% !important;
    }
    .slider-height {
        max-height: 605px !important;
    }
    .RibSinCanjeCarrito1{
        bottom: -35% !important;
        width: auto !important;
        padding: 1% !important;
        left: 35% !important;
    }
    .DivProductBlock{
        min-width: 49.5% !important;
        max-width: 49.5% !important;
    }
    .containerEco {
        width:95% !important;
    }
    .SelectBuscadorHeader {
        padding-top:1%!important;
    }
    .CssSlider{
        margin-top:1%!important;
    }
}

@media only screen and (min-width: 821px) and (max-width: 980px) {
    .RibSinCanje1 {
        font-size: 15px;
        width: 80% !important;
        bottom: -50% !important;
        margin-left: 1% !important;
        margin-right: 1% !important;
        left: 13% !important;
    }
    .RibSinCanje2 {
        width: 50% !important;
        bottom: -50% !important;
        margin-left: 1% !important;
        margin-right: 1% !important;
        left: 25% !important;
    }
    .LogoHeaderNoticia{
        width: 60%!important;
    }
    .SliderImagen1{
        display: block !important;
    }
    .SliderImagen2{
        display: none !important;
    }
    .SliderVideo1{
        display: block !important;
    }
    .SliderVideo2{
        display: none !important;
    }
    .SelectBuscadorRRSS{
        display: none !important;
    }
    .NavBlueMenu{
        display: none !important;
    }
    .SelectBuscadorBtnHeader{
        margin-top: 1% !important;
    }
    .HeaderMobilCarrito {
        margin-right: 10% !important;
        margin-top: 0.8% !important;
    }
    .HeaderLogo{
        display: none !important;
    }
    .HeaderMobil{
        display: block !important;
        padding-top: 1% !important;
        padding-left: 3%!important;
    }
    .MargenHeader {
        margin-top: 0.2%!important;
        margin-bottom: 0.2%!important;
    }
    .slider-height {
        max-height: 605px !important;
        margin-top: 0px !important;
    }
    .RibSinCanjeCarrito1{
        bottom: -35% !important;
        width: auto !important;
        padding: 1% !important;
        left: 15% !important;
    }
    .DivProductBlock{
        min-width: 24.7% !important;
        max-width: 24.7% !important;
    }
    .containerEco {
        width:96% !important;
    }
    .SelectBuscadorHeader {
        padding-top:1%!important;
    }
    .CssSlider{
        margin-top:1%!important;
    }
}

@media only screen and (min-width: 981px) and (max-width: 1200px) {
    .RibSinCanje1 {
        font-size: 15px;
        width: 80% !important;
        bottom: -50% !important;
        margin-left: 1% !important;
        margin-right: 1% !important;
        left: 12% !important;
    }
    .RibSinCanje2 {
        width: 60% !important;
        bottom: -50% !important;
        margin-left: 1% !important;
        margin-right: 1% !important;
        left: 20% !important;
    }
    .LogoHeaderNoticia{
        width: 40%!important;
    }
    .SliderImagen1{
        display: block !important;
    }
    .SliderImagen2{
        display: none !important;
    }
    .SliderVideo1{
        display: block !important;
    }
    .SliderVideo2{
        display: none !important;
    }
    .SelectBuscadorRRSS{
        margin-top: 1% !important;
        display: block !important;
    }
    .NavBlueMenu{
        display: block !important;
    }
    .SelectBuscadorBtnHeader{
        margin-top: 1% !important;
    }
    .HeaderLogo{
        display: block !important;
    }
    .HeaderMobil{
        display: none !important;
    }
    .MargenHeader {
        margin-top: 0.2%!important;
        margin-bottom: 0.2%!important;
    }
    .slider-height {
        max-height: 605px !important;
        margin-top: 0px !important;
    }
    .RibSinCanjeCarrito1{
        bottom: -40% !important;
        width: auto !important;
        left: 10% !important;
        padding: 1% !important;
    }
    .DivProductBlock{
        min-width: 24.7% !important;
        max-width: 24.7% !important;
    }
    .containerEco {
        width:96% !important;
    }
    .header-bottom{
        width:100% !important;
        max-width:100% !important;
    }
    .DivEspacioMenu{
        width:100% !important;
        max-width:100% !important;
    }
    .SelectBuscadorHeader {
        padding-top:1%!important;
    }
}

@media only screen and (min-width: 1201px) and (max-width: 1920px) {
    .RibSinCanje1 {
        font-size: 15px;
        width: 75% !important;
        bottom: -50% !important;
        margin-left: 1% !important;
        margin-right: 1% !important;
        left: 12% !important;
    }
    .RibSinCanje2 {
        width: 50% !important;
        bottom: -50% !important;
        margin-left: 1% !important;
        margin-right: 1% !important;
        left: 25% !important;
    }
    .LogoHeaderNoticia{
        width: 40%!important;
    }
    .SliderImagen1{
        display: block !important;
    }
    .SliderImagen2{
        display: none !important;
    }
    .SliderVideo1{
        display: block !important;
    }
    .SliderVideo2{
        display: none !important;
    }
    .containerEco {
        width:1224px;
        max-width:100%;
    }
    .SelectBuscadorRRSS{
        margin-top: 1% !important;
        display: block !important;
    }
    .NavBlueMenu{
        display: block !important;
    }
    .SelectBuscadorBtnHeader{
        margin-top: 0.5% !important;
    }
    .HeaderLogo{
        display: block !important;
        max-width: 150px !important;
    }
    .HeaderMobil{
        display: none !important;
    }
    .MargenHeader {
        margin-top: 0.2%!important;
        margin-bottom: 0.2%!important;
    }
    .slider-height {
        max-height: 605px !important;
        margin-top: 0px !important;
    }
    .RibSinCanjeCarrito1{
        bottom: -35% !important;
        width: auto !important;
        padding: 1% !important;
        left: 25% !important;
    }
    .DivProductBlock{
        min-width: 24.7% !important;
        max-width: 24.7% !important;
    }
    .containerEco {
        width:80% !important;
    }
    .SelectBuscadorHeader {
        padding-top:0.5%!important;
    }
}

@media only screen and (min-width: 1921px) and (max-width: 8000px) {
    .RibSinCanje1 {
        font-size: 15px;
        width: 70% !important;
        bottom: -50% !important;
        margin-left: 1% !important;
        margin-right: 1% !important;
        left: 12% !important;
    }
    .RibSinCanje2 {
        width: 70% !important;
        bottom: -50% !important;
        margin-left: 1% !important;
        margin-right: 1% !important;
        left: 25% !important;
    }
    .LogoHeaderNoticia{
        width: 40%!important;
    }
    .SliderImagen1{
        display: block !important;
    }
    .SliderImagen2{
        display: none !important;
    }
    .SliderVideo1{
        display: block !important;
    }
    .SliderVideo2{
        display: none !important;
    }
    .containerEco {
        width:1224px;
        max-width:100%;
    }
    .DivEspacioMenu{
        padding-left:10% !important;
        padding-right:10%!important;
        width:100% !important;
        max-width:100% !important;
    }
    .SelectBuscadorRRSS{
        margin-top: 1% !important;
        display: block !important;
    }
    .NavBlueMenu{
        display: block !important;
    }
    .SelectBuscadorBtnHeader{
        margin-top: 0.5% !important;
    }
    .HeaderLogo{
        display: block !important;
        max-width: 150px !important;
    }
    .HeaderMobil{
        display: none !important;
    }
    .MargenHeader {
        margin-top: 0.2%!important;
        margin-bottom: 0.2%!important;
    }
    .slider-height {
        max-height: 605px !important;
        margin-top: 0px !important;
    }
    .SelectBuscadorHeader {
        padding-top:0.5%!important;
    }
    .RibSinCanjeCarrito1{
        bottom: -40% !important;
        width: auto !important;
        left: 10% !important;
        padding: 1% !important;
    }
    .DivProductBlock{
        min-width: 24.7% !important;
        max-width: 24.7% !important;
    }
}


.slick-prev, .slick-next {
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 0;  /* Elimina relleno extra */
    margin: 0;   /* Elimina márgenes */
    width: 40px; /* Ajusta el tamaño del botón */
    height: 40px;
    border: none;
    background: #ff8c42 !important;
    color: white;
    font-size: 20px;
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.3s ease;
}
.slick-prev:hover, .slick-next:hover {
    background: #ff7519 !important;
}

.slick-prev i, .slick-next i {
    margin: 0;  /* Asegura que el icono no tenga margen */
    padding: 0;
    width: auto;
    height: auto;
    line-height: 1;  /* Evita espacios extra */
}

.slick-prev::before,
.slick-next::before {
    content: ""; /* Elimina el contenido del pseudo-elemento */
    display: none !important; /* Oculta completamente el ::before */
}

#DivProdDestacados {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Centrar los elementos */
    width: 100% !important;
}

.DivProdDestacados-item {
    max-width: 100% !important; /* Asegura que ocupe toda la fila */
    flex: 0 0 100% !important;  /* Evita que se encoja o expanda */
    width: 217px !important;
    max-width: 217px !important;
}

/********** SIDEBAR USER **************/
/********** SIDEBAR USER **************/
.md-sidenav-rightCarro.cdz-sidebarCarro {
    position: fixed;
    top: 0;
    right: 0;
    width: 300px; /* Ajusta el ancho del sidebar */
    height: 100vh;
    background-color: white;
    box-shadow: -2px 0 5px rgba(0, 0, 0, 0.2);
    transform: translateX(100%);
    transition: transform 0.3s ease-out;
    z-index: 9999999;
    display: none;
}

.CloseButtonUserSidebarCarro {
    position: absolute;
    top: 10px;
    right: 10px;
    background: #f8f9fa !important;
    border: 2px solid #ebebeb !important;
    font-size: 20px;
    cursor: pointer;
    color: #707070 !important;
    padding: 5px !important;
    transition: 0.3s;
    border-radius: 50% !important;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold !important;
    text-align: center;
    line-height: 1;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

.CloseButtonUserSidebarCarro:hover {
    background: #ff8c42 !important;
    border-color: #ff8c42 !important;
    color: white !important;
    transform: rotate(90deg);
    box-shadow: 0 4px 12px rgba(255, 140, 66, 0.3) !important;
}

.CloseButtonUserSidebarCarro span {
    color: inherit !important;
    font-weight: 600 !important;
}

.CloseButtonUserSidebarCarro:hover span {
    color: white !important;
}

.md-sidenav-right.cdz-sidebar {
    position: fixed;
    top: 0;
    right: 0;
    width: 300px; /* Ajusta el ancho del sidebar */
    height: 100vh;
    background-color: white;
    box-shadow: -2px 0 5px rgba(0, 0, 0, 0.2);
    transform: translateX(100%);
    transition: transform 0.3s ease-out;
    z-index: 9999999;
    display: none;
}

.CloseButtonUserSidebar {
    position: absolute;
    top: 10px;
    right: 10px;
    background: #f8f9fa !important;
    border: 2px solid #ebebeb !important;
    font-size: 20px;
    cursor: pointer;
    color: #707070 !important;
    padding: 5px !important;
    transition: 0.3s;
    border-radius: 50% !important;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold !important;
    text-align: center;
    line-height: 1;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

/* Asegurar que la "X" sea visible en todos los casos */
.CloseButtonUserSidebar span {
    color: inherit !important;
    font-size: 20px !important;
    font-weight: 600 !important;
}

/* Cambiar color de fondo al pasar el mouse */
.CloseButtonUserSidebar:hover {
    background: #ff8c42 !important;
    border-color: #ff8c42 !important;
    color: white !important;
    transform: rotate(90deg);
    box-shadow: 0 4px 12px rgba(255, 140, 66, 0.3) !important;
}

/* Cambiar color de la "X" dentro del botón al pasar el mouse */
.CloseButtonUserSidebar:hover span {
    color: white !important;
}



/********** SIDEBAR USER **************/
/********** SIDEBAR USER **************/


/********** MENU DROPDOWN PRODUCTOS **************/
/********** MENU DROPDOWN PRODUCTOS **************/

.custom-header-bottom {
    width: 100%;
    background-color: #fff;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    transition: all 0.3s ease-in-out; /* Transición suave */
}

/* Cuando el usuario hace scroll, esta clase se activará */
.custom-header-bottom.sticky {
    position: fixed !important;  /* Se mantiene fijo */
    top: 0 !important;
    width: 100% !important;
    z-index: 999 !important;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2) !important; /* Agrega una sombra */
    align-items: center !important;
    justify-content: space-between !important; /* Separa el menú y el botón */
    padding-top: 10px!important;
}

/* Para evitar que el contenido se esconda debajo del menú */
body.has-sticky-header {
    padding-top: 70px; /* Ajusta este valor según la altura del menú */
}

/* ---- OPCIÓN "TU CUENTA" SOLO EN STICKY HEADER ---- */
.custom-header-right-sticky {
    display: none; /* Oculto por defecto */
    position: absolute;
    right: 20px; /* Pegado al borde derecho */
    top: 50%;
    transform: translateY(-50%);
}

/* Cuando el header se vuelve sticky, mostrar el botón */
.custom-header-bottom.sticky .custom-header-right-sticky {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
}

/* Estilos del link en sticky header */
.custom-header-right-sticky .account-trigger {
    text-decoration: none;
    color: black !important;
    font-weight: bold !important;
    font-size: 16px !important;
    padding: 10px 15px !important;
    background: white !important;
    border-radius: 5px !important;
}

/* Asegurar que el menú principal esté alineado en horizontal */
.custom-groupmenu {
    display: flex !important;
    align-items: center !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Espaciado entre elementos del menú */
.custom-groupmenu > li {
    display: inline-flex !important;
    padding: 2px 5px !important;
}

/* Enlace principal del menú */
.custom-menu-link {
    text-decoration: none !important;
    color: #444 !important;
    font-weight: bold !important;
    font-size: 16px !important;
    padding: 0 15px !important;
}

/* Menú desplegable (Productos) */
.custom-groupmenu-drop {
    position: absolute !important;
    left: 0 !important;
    width: 100vw !important;
    background-color: white !important;
    z-index: 9999 !important;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2) !important;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out, transform 0.3s ease-in-out;
}

/* Mostrar el menú cuando se active */
.custom-groupmenu-drop.active {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
}

/* Contenido del menú desplegable */
.custom-groupmenu-drop-content {
    max-width: 1200px;
    margin: 0 auto;
}

/* Estructura de columnas */
.custom-row {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

/* Distribución en 3 columnas */
.custom-col-4 {
    width: 33.333%;
    padding: 10px;
}

.LinkMenuDropDown {
    color: #444 !important; /* Color de texto por defecto */
    cursor: pointer !important; /* Cursor tipo pointer */
    transition: color 0.3s ease-in-out; /* Transición suave */
}

.LinkMenuDropDown:hover {
    color: red !important; /* Cambia a rojo al pasar el mouse */
}

/* Estilos para las listas */
.custom-groupdrop-link {
    list-style: none;
    padding: 0;
    margin: 0;
}

.custom-groupdrop-link li {
    padding: 8px;
}

.custom-groupdrop-link li a {
    text-decoration: none;
    color: black !important;
    font-weight: bold !important;
}

.custom-groupdrop-link li:hover {
    background: #f0f0f0;
}

/********** FIN MENU DROPDOWN PRODUCTOS **************/
/********** FIN MENU DROPDOWN PRODUCTOS **************/
.NewContainer{
    width: 100% !important;
    padding: 0 !important;
    margin: 0px- !important;
}

/********** PRODUCTOS **************/
/********** PRODUCTOS **************/


/* Contenedor general del check */
.CheckProd_container {
    position: absolute;
    top: 5px; /* Margen superior */
    right: 5px; /* Margen derecho */
    width: 40px; /* Tamaño general */
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

/* Estilos base para el cuadrado */
.CheckProd_badge {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 4px; /* Bordes ligeramente redondeados */
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3); /* Sombra para resaltar */
    z-index: 1; /* Capa más baja */
}

/* Estilos base para el círculo */
.CheckProd_circle {
    position: absolute;
    width: 22px; /* Tamaño del círculo */
    height: 22px;
    border-radius: 50%;
    z-index: 2; /* Capa encima del cuadrado */
}

/* Estilos base para el icono */
.CheckProd_icon {
    position: absolute;
    font-size: 14px !important; /* Ajusta el tamaño del ícono */
    font-weight: bold;
    z-index: 3; /* Capa más arriba */
}

/* ----------------- CHECK VERDE ----------------- */

/* Estilos base para el cuadrado */
.Promo1_container {
    position: absolute;
    top: 5px; /* Margen superior */
    left: 5px; /* Margen derecho */
    padding: 10px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
    background: #ff9202; /* Rojo degradado */
    border-radius: 4px; /* Bordes ligeramente redondeados */
    color: #ffffff !important;
    font-weight: bold;
    font-size: 15px !important;
}

.Promo2_container {
    position: absolute;
    top: 5px; /* Margen superior */
    left: 5px; /* Margen derecho */
    padding: 10px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    background: #3679ca; /* Rojo degradado */
    border-radius: 4px; /* Bordes ligeramente redondeados */
    color: #ffffff !important;
    font-weight: bold;
    font-size: 15px !important;
}

/* Cuadrado Verde */
.CheckProd_Verde .CheckProd_badge {
    background: #73d97f; /* Verde degradado */
}

/* Círculo Verde Oscuro */
.CheckProd_Verde .CheckProd_circle {
    background: #29d252; /* Verde más oscuro */
}

/* Icono de Check Verde */
.CheckProd_Verde .CheckProd_icon {
    color: white !important; /* Check en blanco */
}

/* ----------------- CHECK ROJO ----------------- */

/* Cuadrado Rojo */
.CheckProd_Rojo .CheckProd_badge {
    background: #fe646f; /* Rojo degradado */
}

/* Círculo Rojo Oscuro */
.CheckProd_Rojo .CheckProd_circle {
    background: #e40156; /* Rojo más oscuro */
}

/* Icono de Check Rojo */
.CheckProd_Rojo .CheckProd_icon {
    color: white !important; /* Check en blanco */
}

/********** PRODUCTOS **************/
/********** PRODUCTOS **************/

.FullWidthBanner {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw !important;
    max-width: 100vw !important;
}

/* Asegurar que la imagen también sea 100% de ancho */
.full-width-image {
    width: 100vw !important; /* Ocupa todo el ancho de la pantalla */
    height: auto !important; /* Mantiene la proporción */
    object-fit: cover; /* Cubre el espacio sin distorsión */
}

/********** DROPDOWN BUSCADOR CATERGORIAS **************/
/********** DROPDOWN BUSCADOR CATERGORIAS **************/

/* Oculta el borde del select */
.DropCatSearc_list {
    border: none;
    width: 100px;
    font-size: 14px;
    background-color: transparent;
    padding: 5px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
  }
  
  /* Este hack solo aplica al dropdown en navegadores tipo Chrome/Edge */
  .DropCatSearc_list:focus {
    outline: none;
  }
  
  /* Firefox permite esto para mantener el desplegable con su tamaño natural */
  .DropCatSearc_list option {
    white-space: nowrap;
  }
  
  /* Opcional: evita que el texto se recorte en la opción seleccionada */
  .DropCatSearc_list {
    text-overflow: ellipsis;
    overflow: hidden;
  }


  .DropCatSearc_container {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
  }
  
  .DropCatSearc_select {
    border: none;
    width: 150px;
    min-width: 150px;
    font-size: 14px;
    padding: 5px;
    background-color: transparent;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
  }
  
  .DropCatSearc_searchbox {
    flex: 1;
    display: flex;
    border: none;
    border-radius: 4px;
    overflow: hidden;
  }
  
  .DropCatSearc_searchbox input {
    border: none;
    padding: 8px 10px;
    width: 100%;
    font-size: 14px;
  }
  
  .DropCatSearc_searchbox input:focus {
    outline: none;
  }
  
  .DropCatSearc_btn {
    background-color: #1f2c87;
    color: white;
    border: none;
    padding: 10px;
    cursor: pointer;
    font-size: 16px;
    border-radius: 15px!important;
  }
  
  .DropCatSearc_btn i {
    pointer-events: none;
  }
  
  .DropCatSearc_btn2 {
    background-color: #1f2c87;
    color: white;
    border: none;
    padding: 0 12px;
    cursor: pointer;
    font-size: 20px;
    border-radius: 25px!important;
  }
  
  .DropCatSearc_btn2 i {
    pointer-events: none;
  }
    
  /********** DROPDOWN BUSCADOR CATERGORIAS **************/
  /********** DROPDOWN BUSCADOR CATERGORIAS **************/
  #btnLeerMas {
    color: #0d6efd;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease-in-out;
    display: inline-block;
    font-size: 15px!important;
    margin-bottom: 10px!important;
    padding: 5px!important;
}

#btnLeerMas:hover {
    color: #ffffff;
    transform: scale(1.05);
}
/********** MODAL DETALLE PRODUCTOS **************/
/********** MODAL DETALLE PRODUCTOS **************/
/* Modal general */
.ModDetailProd_modal-dialog {
    max-width: 800px;
    width: 95%;
    margin: 2rem auto;
  }
  
  /* Asegura que el modal esté sobre todo */
.ModDetailProd_modal {
    z-index: 999999 !important;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  
  .ModDetailProd_modal-content {
    border-radius: 10px;
    padding: 20px;
    background-color: #fff;
  }
  
  /* Header */
  .ModDetailProd_modal-header {
    border: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  /* Layout principal */
  .ModDetailProd_product-layout {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
  }
  
  /* Imagen con lupa que sigue el mouse */
  .ModDetailProd_image-container {
    width: 100%;
    overflow: hidden;
    border-radius: 8px;
    position: relative;
  }
  
  .ModDetailProd_image-zoom {
    width: 100%;
    padding-top: 100%; /* cuadrado */
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
    transition: background-size 0.3s ease, background-position 0.1s ease;
  }
  
  /* Al hacer hover: zoom y movimiento */
    .ModDetailProd_image-container:hover .ModDetailProd_image-zoom {
    background-size: 500%;
    cursor: zoom-in;
  }

  
  /* Info del producto */
  .ModDetailProd_info {
    flex: 2 1 300px;
  }
  
  .ModDetailProd_product-title {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 10px;
  }
  
  .ModDetailProd_description {
    font-size: 15px;
  }
  
  .ModDetailProd_actions button {
    width: 100%;
    font-weight: bold;
  }
  
  /* Navegación extra */
  .ModDetailProd_navigation {
    margin-top: 20px;
  }
  
  .ModDetailProd_link {
    color: #007bff;
    cursor: pointer;
    margin-bottom: 10px;
  }
  
  /* Footer */
  .ModDetailProd_modal-footer {
    border: none;
    justify-content: flex-end;
  }
  
  /* Responsive */
  @media (max-width: 768px) {
    .ModDetailProd_product-layout {
      flex-direction: column;
    }
  }
  
  
/********** MODAL DETALLE PRODUCTOS **************/
/********** MODAL DETALLE PRODUCTOS **************/


/********** MODAL DETALLE PRODUCTOS **************/
/********** MODAL DETALLE PRODUCTOS **************/
.BannerImgContainer1 {
    height: 445px; /* ajusta este valor al alto deseado */
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .BannerImgContainer1 img {
    height: 100%;
    width: 100%;
    object-fit: cover;
  }

  .BannerImgContainer2 {
    height: 509px; /* ajusta este valor al alto deseado */
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .BannerImgContainer2 img {
    height: 100%;
    width: 100%;
    object-fit: cover;
  }  

  .BannerImgContainer4 {
    height: 598px; /* ajusta este valor al alto deseado */
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .BannerImgContainer4 img {
    height: 100%;
    width: 100%;
    object-fit: cover;
  }    

  .BannerImgContainer5 {
    height: 294px; /* ajusta este valor al alto deseado */
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .BannerImgContainer5 img {
    height: 100%;
    width: 100%;
    object-fit: cover;
  }      
  /********** MODAL DETALLE PRODUCTOS **************/
  /********** MODAL DETALLE PRODUCTOS **************/


  .page-item-btn {
    transition: all 0.3s ease;
    border-radius: 8px;
    margin: 0 5px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    display: inline-block;

}
.page-item-btn:hover {
    transform: scale(1.1);
    background-color: #007bff !important;
}
.page-item-btn a {
    color: #007bff;
    font-weight: bold;
}
.page-item-btn.active {
    background-color: #007bff;
}
.page-item-btn.active a {
    color: white !important;
}

.TopBtn_back {
    position: fixed;
    bottom: 30px;
    right: 30px;
    display: none;
    z-index: 9999;
    animation: TopBtn_fadeInUp 0.5s ease forwards;
    color: #fff!important;
  }
  
  .TopBtn_link {
    background: #0d6efd;
    padding: 14px 18px;
    border-radius: 4px!important;
    font-size: 18px;
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
    transition: transform 0.3s ease, background 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #fff!important;

  }
  
  .TopBtn_link:hover {
    background: #084298;
    transform: scale(1.15);
  }
  
  @keyframes TopBtn_fadeInUp {
    from {
      opacity: 0;
      transform: translateY(40px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  @keyframes TopBtn_fadeOutDown {
    from {
      opacity: 1;
      transform: translateY(0);
    }
    to {
      opacity: 0;
      transform: translateY(40px);
    }
  }

  /*
  * {
    outline: 1px solid red !important;
  }
  */
  
  .MobileMenu_toggle {
    position: fixed;
    top: 15px;
    left: 15px;
    z-index: 1051;
    background: none;
    border: none;
    font-size: 24px;
    color: #333;
  }
  
  .MobileMenu_panel {
    position: fixed;
    top: 0;
    left: -100%;
    width: 300px!important;
    height: 100vh;
    background: #fff;
    overflow-y: auto;
    z-index: 9999;
    transition: left 0.3s ease-in-out;
    box-shadow: 2px 0 10px rgba(0,0,0,0.2);
  }
  
  .MobileMenu_panel.open {
    left: 0;
  }
  
  .MobileMenu_content {
    padding: 20px;
  }
  
  .MobileMenu_link {
    display: block;
    color: #333;
    text-decoration: none;
    padding: 4px 0;
  }
  
  .accordion-body .MobileMenu_link:hover {
    border-left: 4px solid #ff8c42;
    padding-left: 12px; /* Para compensar el espacio ocupado por el borde */
    background-color: #fff8f0; /* Opcional: leve fondo salmón para mayor visibilidad */
    transition: all 0.2s ease-in-out;
    }

  .MobileMenu_user-link {
    display: block;
    margin-top: 20px;
    font-weight: bold;
    color: #a0caff ;
    text-decoration: none;
  }

  .CatInput_EstiloUnico {
    width: 100% !important;
    padding: 12px 16px !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    color: #212529 !important;
    background-color: #ffffff !important;
    border: 2px solid #a0caff  !important;
    border-radius: 8px !important;
    outline: none !important;
    box-sizing: border-box !important;
    transition: all 0.3s ease !important;
}

.CatInput_EstiloUnico:focus {
    border-color: #a0caff  !important;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.4) !important;
}

  .CatSelect_EstiloUnico {
    width: 100%;
    font-size: 16px;
    font-weight: 500;
    color: #212529;
    background-color: #ffffff;
    border: 2px solid #a0caff ;
    border-radius: 8px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='10'%3E%3Cpath fill='%23007bff' d='M1 1l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.CatSelect_EstiloUnico:focus {
    outline: none;
    border-color: #a0caff ;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.4);
}

.CatSelect_EstiloUnico option {
    color: #212529;
    background-color: #ffffff;
}

.MobileStickyMenu {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background-color: white;
    padding: 10px 15px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.MobileMenuToggleUnique {
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 9999;
    background-color: white;
    padding: 10px;
    border: none;
    border-radius: 20px;
    font-size: 20px;
    color: #333;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.HrMobilMenu{
    border: none;
    height: 1px;
    background: linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,0.3), rgba(0,0,0,0));
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    margin: 1rem 0;
    border-radius: 2px;
}

#MobileMenu {
    position: fixed;
    top: 0;
    left: 0;
    width: 85%;
    height: 100vh;
    background-color: white;
    z-index: 9999;
    transform: translateX(-100%);
    opacity: 0;
    display: none;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.tabla-scroll {
    width: 100%;
    overflow-x: auto;
}

.pedido-tabla {
    width: 100%;
    min-width: 900px; /* fuerza scroll horizontal si pantalla es pequeña */
    border-collapse: collapse;
    font-family: 'Segoe UI', sans-serif;
    background-color: #fff;
    border: 1px solid #ccc;
}

.pedido-tabla th,
.pedido-tabla td {
    padding: 10px;
    border: 1px solid #ddd;
    font-size: 14px;
    text-align: left;
    vertical-align: top;
}

.pedido-tabla th {
    background-color: #f5f5f5;
    font-weight: 600;
    white-space: nowrap;
}

.logo-pago {
    height: 25px;
}

.observacion {
    background-color: #eef1f5;
}

.alert-card {
    display: flex;
    align-items: center;
    padding: 20px;
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    background-color: #fff;
    border-left: 6px solid;
    margin-bottom: 20px;
    animation: fadeIn 0.5s ease-in-out;
}

.alert-card .alert-icon {
    font-size: 40px;
    margin-right: 20px;
}

.alert-card .alert-content h4 {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
}

.alert-card .alert-content p {
    margin: 5px 0 0;
    font-size: 16px;
}

.alert-card.danger {
    border-color: #dc3545;
    background-color: #ffe6e9;
    color: #721c24;
}

.alert-card.danger .alert-icon {
    color: #dc3545;
}

.alert-card.warning {
    border-color: #ffc107;
    background-color: #fff8e1;
    color: #856404;
}

.alert-card.warning .alert-icon {
    color: #ffc107;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/**** CSS STICKY SEARCH *****/
/**** CSS STICKY SEARCH *****/
/**** CSS STICKY SEARCH *****/
/**** CSS STICKY SEARCH *****/

/* Forzar flechas internas en Chrome, Edge y navegadores Webkit */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: auto;
    appearance: auto;
    margin: 0;
}

/* Firefox también respeta nativamente las flechas, pero si quieres ser ultra explícito */
input[type=number] {
    -moz-appearance: textfield; /* Eliminar apariencia rara en Firefox */
}