/* El bloque de opciones ocupa todo el ancho disponible */
.barraInputs .colorOptions {
  width: 100%;
  box-sizing: border-box;
}

/* Contenedor de botones: ocupa el ancho y permite saltar */
.barraInputs .colorOptions .colorBtns {
  display: flex;
  gap: 15px;
  justify-content: center;
  flex-wrap: wrap;
  width: 100%;
  box-sizing: border-box;
}

/* Botones que se adaptan al ancho */
.barraInputs .colorOptions .color_pick2 {
  flex: 1 1 100px;       /* mínimo 100px */
  max-width: 120px;      /* nunca más de 120px */
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 2px solid #ddd;
  border-radius: 15px;
  padding: 10px;
  text-decoration: none;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  transition: all 0.2s ease;
}

/* Imagen dentro de los botones */
.barraInputs .colorOptions .color_pick2 img {
  max-width: 70%;   /* se adapta al botón */
  height: auto;
  display: block;
}

/* Seleccionado */
.barraInputs .colorOptions .color_pick2.selected {
  border-color: #d4145a;
  box-shadow: 0 0 0 3px rgba(212,20,90,0.3);
}

#colorBarra{

border-radius: 4px !important;
background-color: none;
color: white;
padding: 3%;
}

.barraInputs{
  margin-top:15px; margin-bottom:10%; background-color:#e6e6e6; border-radius:6px; max-width:100%;;
}