/* Estilos generales */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #f4f4f4;
}

button {
  padding: 10px 15px;
  margin: 5px;
  border: none;
  background-color: #007bff;
  color: white;
  cursor: pointer;
  border-radius: 5px;
  font-size: 1rem;
}


#prenda_button {
  padding: 10px 15px;
  margin: 5px;
  border: none;
  background-color: #000408;
  color: white;
  cursor: pointer;
  border-radius: 5px;
  font-size: 1rem;
}


#color_button {
  padding: 10px 15px;
  margin: 5px;
  border: none;
  background-color: #000408;
  color: white;
  cursor: pointer;
  border-radius: 5px;
  font-size: 1rem;
}

#boton_personalizacion {
  padding: 10px 15px;
  margin: 5px;
  border: none;
  background-color: #000408;
  color: white;
  cursor: pointer;
  border-radius: 5px;
  font-size: 1rem;
}

#boton_tamano_logo {
  padding: 10px 15px;
  margin: 5px;
  border: none;
  background-color: #000408;
  color: white;
  cursor: pointer;
  border-radius: 5px;
  font-size: 1rem;
}

#boton_posicion_logo {
  padding: 10px 15px;
  margin: 5px;
  border: none;
  background-color: #000408;
  color: white;
  cursor: pointer;
  border-radius: 5px;
  font-size: 1rem;
}

#descarga_diseno {
  position: relative;
  display: block;
  padding: 10px 15px;
  margin: 5px;
  border: none;
  background-color: #000408;
  color: white;
  cursor: pointer;
  border-radius: 5px;
  font-size: 1rem;
}



button:hover {
  background-color: #0056b3;
}

/* Contenedores flexibles */
.prenda,.prenda_mujer, .color, .lugar_personalizacion, .tamano_logo, .posicion_logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 10px;
}

.prenda-content, .color-content, .lugar_personalizacion-content, .tamano_logo-content, .posicion_logo-content  {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px; /* Ajusta el espacio entre los elementos */
  flex-direction: row; /* Cambia de columna a fila */
}


/* Botones responsivos */
.buttons-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 15px;
}

#logoUpload {
  margin: 10px 0;
  background-color: #000408;
  color: white;
}

/* Media queries para adaptar a diferentes tamaños de pantalla */
@media (max-width: 1920px) {
  button {
      font-size: 0.9rem;
      padding: 8px 12px;
  }
  .prenda-content, .color-content, .lugar_personalizacion-content, .tamano_logo-content, .posicion_logo-content {
    flex-direction: row; /* En pantallas grandes, los ítems en horizontal */
  }

  .canvas-container {  
    position: relative;  
   
  }

  .info_logo {  
    position: relative;
    left: 400px;   
  }

  #shirtCanvas {
    position: relative;
    left: 400px;
    touch-action: pinch-zoom;
  }

  #descarga_diseno {
    position: relative;
    left: 550px;
  }

}



@media (max-width: 1024px) {
  button {
      font-size: 0.9rem;
      padding: 8px 12px;
  }
  .prenda-content, .color-content, .lugar_personalizacion-content, .tamano_logo-content, .posicion_logo-content {
    flex-direction: row; /* En pantallas grandes, los ítems en horizontal */
  }

  .canvas-container {  
    position: relative;  
  
  }

  .info_logo {  
    position: relative;
    left: 100px;   
  }

  #shirtCanvas {
    position: relative;
    left: 100px;
    touch-action: pinch-zoom;
  }
  #descarga_diseno {
    position: relative;
    left: 250px;
  }

}

@media (max-width: 720px) {
  button {
      font-size: 0.9rem;
      padding: 8px 12px;
  }
  .prenda-content, .color-content, .lugar_personalizacion-content, .tamano_logo-content, .posicion_logo-content {
    flex-direction: row; /* En pantallas grandes, los ítems en horizontal */
  }

  .canvas-container {  
    position: relative;  
  
  }

  .info_logo {  
    position: relative;
   
  }

  #shirtCanvas {
    position: relative;
    left: 0px;
    touch-action: pinch-zoom;
   
  }
  #descarga_diseno {
    position: relative;
    left: 150px;
  }

}

@media (max-width: 480px) {
  button {
      font-size: 0.9rem;
      padding: 8px 12px;
  }
  .prenda-content, .color-content, .lugar_personalizacion-content, .tamano_logo-content, .posicion_logo-content {
    flex-direction: row; /* En pantallas grandes, los ítems en horizontal */
  }

  .canvas-container {  
    position: relative;  
 
  }

  .info_logo {  
    position: relative;
   
  }

  #shirtCanvas {
    position: relative;
    left: 0px;
    touch-action: pinch-zoom;
    width: 400px;
   
  }

  #descarga_diseno {
    position: relative;
    left: 100px;
  }


}

@media (max-width: 320px) {
  button {
      font-size: 0.9rem;
      padding: 8px 12px;
  }
  .prenda-content, .color-content, .lugar_personalizacion-content, .tamano_logo-content, .posicion_logo-content {
    flex-direction: row; /* En pantallas grandes, los ítems en horizontal */
  }

  .canvas-container {  
    position: relative;  
 
  }

  .info_logo {  
    position: relative;
   
  }

  #shirtCanvas {
    position: relative;
    left: 0px;
    touch-action: pinch-zoom;
    width: 400px;
   
  }

  #descarga_diseno {
    position: relative;
    left: 0px;
  }


}