/*--------  GENERAL ---------*/
.width90{
    width:100%;max-width:1300px;margin: auto;
    height:auto;
}

.containerStars .h33{
 color:var(--negro);
 font-size:22px;
 font-weight:600;padding-bottom:15px;
}
/*--------  COMENTARIOS ---------*/
.flexSuperior{
    display:flex;margin-top:30px;
    align-items: center;
    justify-content:space-between;
    padding-bottom: 15px;padding-left:20px;padding-right:20px;
}
.flexSuperior span {margin-left:4px;}
.flexSuperior span i{
    margin-left:-4px;color:rgb(255, 208, 0);
}

.botonAgregarResenia{
    padding: 10px 20px;cursor: pointer;transition:all ease .3s;border-radius:5px;
    border: solid 1px rgb(212, 212, 212);background-color:transparent;
}
.botonAgregarResenia:hover{
    background-color:#f5f5f5;
}
body.dark .botonAgregarResenia{color: var(--blanco);}
body.dark .botonAgregarResenia:hover{
  background-color:#3434349e;
}


.botonAgregarReseniaLogin{
  padding: 10px 20px;cursor: pointer;transition:all ease .3s;border-radius:5px;
  border: solid 1px rgb(212, 212, 212);background-color:transparent;
}
.botonAgregarReseniaLogin:hover{
  background-color:#f5f5f5;
}
body.dark .botonAgregarReseniaLogin{color: var(--blanco);}
body.dark .botonAgregarReseniaLogin:hover{
background-color:#3434349e;
}



.flexComentarios{
    display:flex;
    flex-wrap: wrap;
    justify-content: center;margin-top:-15px;
}

.resenia{
    width:auto;
    max-width:250px;
    transition:all ease .3s;
    height:auto;
    overflow:hidden;
    margin:10px;
    min-height:50px;
    background-color:transparent;
    border:1px solid #edecec;
    justify-content: center;
}


body.dark .resenia{
  background-color:transparent;
  color:var(--blanco);border:0.5px solid #3434349e;
}

.reseniaSinFoto{
    width:auto;
    max-width: 350px;
    transition:all ease .3s;
    height:auto;
    overflow:hidden;
    margin:10px;
    min-height:50px;
    background-color:#fff;
    border:1px solid #edecec;
    display: flex;
    justify-content: center;
}

.resenia img{
    width:auto;
    max-width: 100%;
}
.contentresenia{
    padding:10px;
}

.contentresenia span{margin-left:2px;}

.contentresenia span i{
    font-size:11px;margin-left:-3px;
    color:rgb(255, 208, 0);
}

.resenia .contentresenia h5{
    font-size:18px;margin-top:10px;margin-bottom:5px;
}

.reseniaSinFoto .contentresenia h5{
    font-size:18px;margin-top:10px;margin-bottom:5px;
}

.resenia .contentresenia p{
    font-size:15px;padding-top:10px;
}

.reseniaSinFoto .contentresenia p{
    font-size:15px;padding-top:10px;
}

.resenia:hover {
    background-color: var(--blanco);
}

.reseniaSinFoto:hover {
    background-color: var(--blanco);
}

.contentBoton{
    display:flex;background-color: transparent;
    justify-content:center;width:50%;margin:auto;padding-top:20px;padding-bottom:30px;
}

.btnVerTodasResenias{
    padding:8px 10px;font-size:12px;background-color: transparent;color:rgb(61, 61, 61);cursor: pointer;border:1px solid silver;outline:none;
}
body.dark .btnVerTodasResenias{color:var(--blanco);}


.btnVerTodasResenias:hover{
    cursor: pointer;
}



/*Modal de resenias*/

.openContainerStars{
    width:100%;height:100%;background-color:rgba(51, 51, 51, 0.507);display:flex;justify-content:center;position:fixed;top:0px;display:none;transition:all ease .3s;
    z-index:10000000000000;
}
.openOk{display:flex;transition:all ease .3s;}.closeOk{display:none;transition:all ease .3s;}
.closeContainStars{width:100%;height:50px;cursor:pointer;display:flex;justify-content: flex-end;align-items: center;font-size:30px;color:#444;margin-right:30px;}
.containerStars{
  position: relative;
  margin: auto;
  width: 70%;max-width:900px;height:auto;
  background: #fff;
  border: 1px solid rgb(136, 136, 136);
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.containerStars .post{
  display: none;
}
.containerStars .text{
  font-size: 25px;
  color: #666;
  font-weight: 500;
}
.containerStars .edit{
  position: absolute;
  right: 10px;
  top: 5px;
  font-size: 16px;
  color: #666;
  font-weight: 500;
  cursor: pointer;
}
.containerStars .edit:hover{
  text-decoration: underline;
}
.containerStars .star-widget input{
  display: none;
}
.star-widget label{
  font-size: 40px;
  color: #444;
  padding: 10px;
  float: right;
  transition: all 0.2s ease;
  cursor: pointer;
}
.star-widget input:not(:checked) ~ label:hover,
.star-widget input:not(:checked) ~ label:hover ~ label{
  color: rgb(249, 189, 54);
}
.star-widget input:checked ~ label{
  color: rgb(249, 189, 54);
}
.star-widget input#rate-5:checked ~ label{
  color: rgb(249, 189, 54);
  /*text-shadow: 0 0 20px rgb(255, 245, 111);*/
}
#rate-1:checked ~ .header:before{
  content: "!Lo odio! 😠";color:#000;
}
#rate-2:checked ~ .header:before{
  content: "No me gusta 😐";color:#000;
}
#rate-3:checked ~ .header:before{
  content: "Está bien 😀";color:#000;
}
#rate-4:checked ~ .header:before{
  content: "Muy bueno";color:#000;
}
#rate-5:checked ~ .header:before{
  content: "¡Me encantó! 🤩";color:#000;
}
.container form{
  display: none;
}
input:checked ~ form{
  display: block;
}
.header{
  width: 100%;
  font-size: 25px;
  color: #fe7;
  font-weight: 500;
  margin: 5px 0 30px 0;
  text-align: center;
  transition: all 0.2s ease;
}
form .textarea{
  height: 100px;
  width: 100%;
  overflow: hidden;
}
form .textarea textarea{
  height: 100%;
  width: 100%;
  outline: none;
  color: var(--negro);
  border: 1px solid #333;
  background:var(--blanco);
  padding: 10px;
  font-size: 17px;
  resize: none;
}
.textarea textarea:focus{
  border-color: #444;
}
form .btn{
  height: 45px;
  width: 100%;
  margin: 15px 0;margin-bottom:60px;
}
form .btn button{
  height: 100%;
  width: 100%;
  outline: none;
  background: var(--secundario);
  color: var(--blanco);
  border:none;outline:none;
  font-size: 17px;
  font-weight: 500;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius:5px;
}
form .btn button:hover{
  background: var(--secundariohover);letter-spacing:2px;
}



/*--------------------------------
DESDE AQUÍ AGREGARRRRRRRRRRRRRRRRRRRRRRR
--------------------------------*/


.file input {position:absolute; width:0; overflow:hidden; opacity:0;}
.file {
  width:0%; /* Use for fluid design */
  min-width:325px;
  height:43px;
  line-height:40px!important;
  cursor:pointer;margin-top:10px;
  position:relative;
  display:inline-block;
  white-space:nowrap;
}
.file:before {
  content:"Añadir foto (opcional)";
  font-size:18px;
  font-weight:600;
  display:block;
  position:absolute;
  box-sizing:border-box;
  width:100%;
  height:inherit;
  text-align: center;
  border-radius:5px;
  background-color:var(--blanco);
  border:1px solid var(--negro);
  color:var(--negro);
  padding-bottom:5px;
  overflow:hidden;
  text-overflow:ellipsis;
  transition:all ease .3s;
}




.file[title]:not([title=""]):before{
  content:attr(title);
  color:#1b1b1b;
}






    .productoReseniaBonbonpetit{
        width:100%;display:flex;height:auto;width:100%;border-top:1px solid #edecec;
    }
    .productoReseniaBonbonpetit img{padding:10px;max-height:80px;min-height:80px;}

   .flexFornStrong{display:flex;align-items:center;padding:5px;}
   .flexFornStrong p{font-weight:400;font-size:12px;width:100%;}


@media(max-width:650px){

.containerStars{
    position: relative;
    margin: auto;
    width: 95%;
}

.containerStars .h33{
text-align:center;
font-size:18px;
padding:10px;
}




form .textarea{
  height: 100px;
  width: 97%;
  overflow: hidden;
}

.star-widget{
  margin:auto;
}

.star-widget label{
  font-size: 30px;
  color: #444;
  padding: 20px;
  padding-left: 4px;
  transition: all 0.2s ease;
}

form .btn button{
  width: 97%;
}

.file {
  min-width:280px;
}
.file:after {
  margin-left:31px;
}
}



/*--------------------------------
HASTA AQUÍ AGREGARRRRRRRRRRRRRRRRRRRRRRR
--------------------------------*/


#upload {
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 50px;
    top: 0;
    left: 0;
    opacity: 0;
    cursor: pointer;
}















/*--------  RESPONSIVE COMENTARIOS ---------*/

@media screen and (max-width:500px){
    .resenia,.reseniaSinFoto{max-width:180px;margin:10px;display:block;}
    .resenia img {width:100%;height: auto;max-height:100px;}
    .flexSuperior{margin-bottom:10px;}
}

@media screen and (max-width:450px){
.flexSuperior{flex-wrap:wrap;text-align:center;}
.flexSuperior div{width:100%;}
.resenia,.reseniaSinFoto{width:160px; max-width:160px;} 
}
@media screen and (max-width:380px){
.containerStars{display:flex;justify-content:center;overflow:hidden;}
form .btn{height: 45px;width:90%;} form .textarea{width:87%;}
}

@media screen and (max-width:360px){
.flexCajaComentarios{margin-bottom:50px;}
.resenia .contentresenia h5{font-size:14px;}
.reseniaSinFoto .contentresenia h5{font-size:14px;}
.resenia,.reseniaSinFoto{width:140px; max-width:140px;margin:5px;}
.resenia .contentresenia p{font-size:12px;}
.reseniaSinFoto .contentresenia p{font-size:12px;}
}

/*--------  RESPONSIVE CATEGORIAS ---------*/
@media screen and (max-width:435px){
  .contenedorImgCat{width:100%;height:250px;}
}
@media screen and (max-width:355px){
  .contenedorImgCat{width:100%;height:220px;}
  .overlayNombreCat .h333{font-size:22px;font-weight:550;}
}