.maincategoryMenu{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: 40px;
  }

  .centrarcategoryMenu{
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-wrap: wrap;
    width: 80%;
  }


 .palabraCategorias{
  display: none;
 }
/*-------------------------------------------------------------Divs de userConfig*/
.parteIzquierdaCategoryMenu{
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-wrap: wrap;
    width: 20%;
    gap: 8px;
  }
  .parteIzquierdaCategoryMenu1{
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    width: 90%;
    gap: 5px;
  }

  /*--------------------------Form Buscar*/
  .formSearch{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50px;
    width: 100%;
    margin-bottom: 0;
    font-size: clamp(0.3rem, 0.6vw, 1rem);
  }
  
  
  .formSearch input{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 35px;
    width: 65%;  
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    border: 0.5px solid;
    border-color: #3d3d3d42;
    padding: 15px;
  }
  
  .formSearch button{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 35px;
    width: 35%; 
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    border: 0.5px solid;
    border-color: #3d3d3d42;
    background-color: #0093E9;
    color: white;
  }
  
  .formSearch button:hover{
    cursor:pointer;
  }




  /*--------------------------Form Ofertas*/
  .formOfertas{
    margin-bottom: 0;
    display: flex;
    justify-content: center;
  }


  .formOfertas button{
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
    font-size: 15px;
    font-weight: bold;
    color: #bb43d9

  }

  .botonOfertas:hover{
    font-size: 15px;
    color: rgb(202, 96, 96);
    cursor: pointer;
  }

  .parteIzquierdaCategoryMenu a{
    font-size: 15px;
    color: rgb(76, 76, 76)
  }

  .parteIzquierdaCategoryMenu a:hover{
    font-size: 15px;
    color: rgb(202, 96, 96);
    cursor: pointer;
  }


/*------ Parte Derecha CantenedorCategorias*/

  .parteDerechaCategoryMenu{
    width: 80%;
  }

  .mainProductos{
    width: 100%;
    height: 100%;
  }

  .centrarProductos{
    width: 100%;
    height: 80%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0;
  }

/*Filtros*/
.filtros{
  background-color: #3d3d3d19;
  width: 100%;
  height: 50px;
  border-radius: 7px;
  display: flex;
  justify-content: end;
  align-items: center;
}

.izquierdaFiltros{
  width: 50%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.izquierdaFiltros h5{
  font-size: clamp(0.9rem, 0.9vw, 1rem);
  color: #bb43d9;
}


.derechaFiltros{
  width: 50%;
  height: 100%;
  display: flex;
  justify-content: end;
  align-items: center;
}

.derechaFiltros form{
  width: 50%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
}

select {
  /* -webkit-appearance: none; 
  -moz-appearance: none; 
  appearance: none;  */
  
  border: 0.1px solid;
  border-color: #3d3d3d37;
  color: #3d3d3d;
  background: #ffffff;
  padding: 1px;
  color: #3d3d3d;
  cursor:pointer;
  font-size: 0.85em;
  width: 90%;
  height: 60%;
}

.select2-container--default .select2-results__option {
  padding: 10px;
  border: 1px solid #333; /* Aplicar borde a la opción */
  background-color: #f9f9f9;
  color: #333;
}




.paginator{
  width: 100%;
  display: flex;
  height: 50px;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.paginator img{
  width: 15px;
  height: 15px;
}






@media (min-width: 320px) and (max-width: 480px) {

  .maincategoryMenu{

  }
  
  .centrarcategoryMenu{
    width: 95%;
  }

  .parteIzquierdaCategoryMenu{
    width: 100%;
  }

  /*----------------------------------Categorias Menu*/
  
  .palabraCategorias{
    display: none;
  }
   
  .palabraCategorias{
    width: 100%;
    height: 40px;
    font-size: clamp(0.9rem, 0.9vw, 1.2rem);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
    background-color: rgb(255, 255, 255);
   }

   .palabraCategorias p{
    font-size: clamp(0.7rem, 0.7vw, 1.2rem);
   }

   .parteIzquierdaCategoryMenu{
    background-color: white;
    border-radius: 5px;
    border: 0.1px solid #3d3d3d37;
    overflow: hidden;
    transition: max-height 0.5s ease;
    max-height: 40px;
    box-shadow: 3px 3px 3px rgba(194, 194, 194, 0.328);
   }

   .parteIzquierdaCategoryMenu.expanded {
    max-height: 10000px; /* Set to a large enough value to accommodate your content */
    padding-bottom: 20px;
  }

  .formOfertas{
    width: 100%;
    height: 45px;
    display: flex;
    padding-left: 5px;
    justify-content: start;
    align-items: center;
    border-radius: 7px;
    background-color: #cacaca37;
  }

  .formOfertas button{
    font-size: clamp(0.8rem, 0.8vw, 1.2rem);
  }

   .parteIzquierdaCategoryMenu1 a{
    width: 100%;
    height: 45px;
    display: flex;
    padding-left: 5px;
    justify-content: start;
    align-items: center;
    font-size: clamp(0.8rem, 0.8vw, 1.2rem);
    border-radius: 7px;
    background-color: #cacaca37;
   }


   /*----------------------------------------------Lado Derecho*/
   .parteDerechaCategoryMenu{
    width: 100%;
   }

   /*-----------Filtros*/
  .filtros{
    margin-top: 30px;
    margin-bottom: 30px;
  }

  .derechaFiltros{
    width: 50%;
    height: 100%;
    display: flex;
    justify-content: end;
    align-items: center;
  }

  .derechaFiltros form{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
  }

  /*---------------------Productos*/
  /* .cajaProductosA{
    margin-bottom: 30px;
  } */
}