/* Estilos generales */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  touch-action: manipulation; /* Blo|uea gestos adicionales */
  overscroll-behavior: none;  /* Evita desplazamientos no deseados */
}

/* Estilo del cuerpo */
body {
  font-family: Arial, sans-serif;
  background-color: #e66848;
  color: #fff;
  margin: 0;
}

/* Barra superior (bartop) */
.bartop {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #333;
  color: #fff;
  padding: 10px;
  font-family: Arial, sans-serif;
}

/* "Listen Live" centrado con ícono de YouTube */
.listen-live {
  display: flex;
  align-items: center;
  font-size: 18px;
  color: #fff;
  flex: 1;
  justify-content: center;
}

.listen-live .icon {
  width: 24px;
  height: 24px;
  margin-right: 8px;
}

/* Icono de Twitter X a la derecha */
.twitter .icon {
  width: 24px;
  height: 24px;
  cursor: pointer;
}

/* Contenedor principal */
.container {
  width: 100vw; /* Ocupa todo el ancho del viewport */
  text-align: center;
  padding: 0; /* Sin padding para edge-to-edge */
  margin: 0; /* Sin margen */
}

/* Estilo de las cabeceras */
h2 {
  font-size: 1.2rem;
  color: #333;
  margin: 15px; /* Margen interno */
}

h3 {
  font-size: 1rem;
  color: #333;
  margin: 15px; /* Margen interno */
}

/* Contenedor de desplazamiento de imágenes */
.scroll-container {
  display: flex;
  overflow-x: auto;
  padding: 10px 0; /* Sin padding para edge-to-edge */
  margin: 0px; /* Margen interno */
  scrollbar-width: none;
  max-width: 100%;
}

.scroll-container::-webkit-scrollbar {
  display: none;
}

/* Estilo de las imágenes */
.scroll-container img {
  width: 300px;
  height: 169px;
  margin: 0px 10px;
  cursor: pointer;
  border: 3px solid transparent;
  transition: all 0.3s ease;
  filter: grayscale(100%);
  border-radius: 12px;
  flex-shrink: 0;
}



.scroll-container img.selected {
  filter: grayscale(0%);
  border-color: gold;
}

/* Géneros musicales */
#genres {
  display: flex;
  overflow-x: auto;
  margin: 0px; /* Espaciado interno */
  gap: 10px;
  scrollbar-width: none; /* Ocultar scroll */
  max-width: 100%;
  padding: 10px 10px;
}

.genre-box {
  padding: 10px 20px;
  cursor: pointer;
  border-radius: 8px;
  color: #000;
  border: 2px solid #000;
  text-transform: capitalize;
  transition: transform 0.3s ease, filter 0.3s ease;
  background-color: #e0e0e0;
}

.genre-box.selected {
  filter: grayscale(0%);
  transform: scale(1.1);
  border: 2px solid #000;
  background-color: transparent;
  border-color: gold; /* Borde dorado */

}

/* Contador de canciones */
.counter {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 15px; /* Ajuste para margen interno */
}

/* Resumen del pedido */
.order-summary {
  margin: 15px; /* Ajuste para margen interno */
  font-size: 1rem;
  font-weight: bold;
  color: #333;
}

/* Botones */
button {
  padding: 15px 30px;
  margin: 15px; /* Ajuste para margen interno */
  cursor: pointer;
  background-color: #333;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 1.1rem;
  transition: background-color 0.3s;
}

button:hover {
  background-color: #555;
}

/* Pie de página */
.footer-text {
  font-size: 12px;
  color: #fff;
  text-align: center;
  margin: 15px; /* Ajuste para margen interno */
  cursor: pointer;
}

.footer-text span {
  color: #fff;
  text-decoration: underline;
  cursor: pointer;
}

.footer-text span:hover {
  color: #ccc;
}