.producto__contenedor{
  display:grid;
  /* grid-gap: 10px; */
  margin-top: .9rem;
  margin-right:6rem;
  grid-template-columns: .2fr .5fr .5fr 0.2fr ;
  grid-template-rows: .4fr auto.5fr 2fr;
  grid-template-areas: 
  '.    imagen     detalle    .'  
  '.    miniatura    mensaje      .'
  '.    fichas    fichas      .'
  '.    imgdesc   imgdesc     .';
}
.mensaje{
  grid-area: mensaje;
  background-color: var(--blancoA);
}
.mensajes__insert{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;

}
.msjExito{
  width: 100%;
  font-size: 1.8vh;
  font-weight: 500;
  margin-top: 5px;
  color: var(--negro);

}
.chat-input{
  display: flex;

  
    /* border: 1px solid #ccc; */
    border-radius: 5px;
    
}
.chat-input input{
  flex: 1;
  border: 1px solid #ccc; 
    border-radius: 5px;
    padding: 10px;
    margin-right: 10px;
}
.chatBtn{
  grid-area: btn;
  padding: 10px ;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
.producto__miniatura{
  grid-area: miniatura;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: center;
justify-content: space-around;
background-color: var(--blancoA);

  padding-left: 1rem;
}
.producto__miniatura .imagen-miniatura {
  margin-bottom: 10px;
  width: 8vh;
  height:8vh;
}
.producto__miniatura .video-miniatura:focus {
  outline: none; /* Para eliminar el contorno del video al hacer clic */
}

 .producto__miniatura .video-miniatura {
  margin-bottom: 10px;
  width: 8vh;
  height:8vh;

}
 .producto__imagen__contenedor {
  grid-area: imagen;
  background-color: var(--blancoA);
  border-top-left-radius: 30px;
  

} 

 .producto__imagen__detalle img{
  max-width :800px;
  max-height: 350px;
  object-fit: contain;
  border-radius: 15px;
  padding: 1rem;
} 
#videoPrincipal{
  max-width :800px;
  max-height: 350px;
  object-fit: cover;
  border-radius: 15px;
  padding: 1rem;
}
.ocultar{
  display: none;
}

.producto__detalle{
  grid-area: detalle;
  padding: .5rem;
  background-color: var(--blancoA);
  border-top-right-radius: 30px;
} 
.producto__ficha__contenedor{
  grid-area: fichas;
}
.producto__ficha{
background-color: var(--blancoA);
 padding: 2rem;
/*margin: 1rem; */


}
.ficha__titulo{
text-align: center;
font-weight: 600;
text-transform: uppercase;
padding-bottom: .5rem;
margin-top: .7rem;
}

.ficha__tabla{
width: 100%;

padding: .5rem;
text-align: justify;
margin-bottom: 1rem;
}
.celda__nombre{
text-align: justify;
color: var(--gris);
padding: .3rem;
}
.celda__informacion{
text-align: left;
padding: .3rem;

}
.ficha__tabla tr{
padding: .1rem;
padding-top: .1rem;
margin-top: 1rem;

}   
.contenedor__imagen__descripcion{
  grid-area: imgdesc;
  width: 100%;
  background-color: var(--blancoA);
  border-bottom-left-radius: 30px;
  border-bottom-right-radius: 30px;


}
.imagen__descripcion img{
max-width: 100%;
display: flex;
justify-content: space-around;
align-items: center;
object-fit: contain;
  /* padding: 1rem; */
  padding-bottom: 2rem;
   /* padding-left: 5rem; */
 
  }
  .input__cantidad{
   border: 1px solid var(--gris);
  }
.producto__cbm{
  padding: 1rem;
  justify-content: center;
}
.cbm__titulo{
  text-align: center;
  text-transform: uppercase;
  font-weight: 500;
  margin-top: 0.5rem;
  margin-bottom: .3rem;
}
.cbm__texto{
  text-align: justify;
  padding-bottom: .5rem;
  padding-top: .3rem;
  font-size: 2.9vh;

}
.cbm__cantidad{
  padding: .3rem;
}
.flecha-izquierda,
.flecha-derecha {
  position: absolute;
  top: 65%;
  transform: translateY(-50%);
  font-size: 24px;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  color: var(--mostazaPrimario);
  border-radius: 50%;
  cursor: pointer;
}

.flecha-izquierda {
  left: 10px;
}

.flecha-derecha {
  right: 10px;
}
@media (max-width: 700px) {
  .producto__contenedor{
    top: 20px;
    margin: 3.6rem 0.5rem 0 .5rem;
    grid-template-columns: 0.5fr 1fr;
    grid-template-rows: .4fr .2fr auto 50px 1fr;
    grid-template-areas: 
    'imagen    imagen'  
    'miniatura miniatura'
    'detalle      detalle'
    'mensaje      mensaje'
    'fichas       fichas'
    'imgdesc   imgdesc';
  }
  .producto__imagen__contenedor {

    border-top-right-radius: 30px;
    
  
  }
  .producto__miniatura{
    background-color: var(--blancoA);
    padding-bottom: .5rem;
    grid-area: miniatura;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    height: 8vh;
  
    padding-left: 1rem;
  }
  .producto__miniatura .imagen-miniatura {
    margin-bottom: 10px;
    width: 7vh;
    height: 8vh;
    justify-content: center;
  }
  .producto__miniatura .video-miniatura {
    margin-bottom: 10px;
    width: 7vh;
    height:8vh;
  }
  .producto__imagen__detalle img{
    max-width :500px;
    max-height: 205px;
    object-fit: cover;
    border-radius: 15px;
    padding: 1rem;
  } 
  #videoPrincipal{  
    max-width :500px;
    max-height: 205px;
    object-fit: cover;
    border-radius: 15px;
    padding: 1rem;}

  .producto__detalle{
    border-radius: 0px;
  }
  .cbm__titulo{
    font-weight: 500;
    font-size: 2.1vh;
  }
  .cbm__texto{
    font-size: 1.9vh;
  }
  .ficha__tabla {
    width: 100%;
    display: block;
  }
  
  .ficha__tabla tr {
    display: block;
    margin-bottom: 10px; /* Espacio entre filas */
  }

  .ficha__tabla td,
  .ficha__tabla th {
    width: 100%;
    max-width: 100%;
    display: block;
    box-sizing: border-box;
    text-align: left;
    padding: 5px;
  }
  
  .ficha__tabla .celda__nombre {
    font-weight: bold;
  }
}