/*************
SLIDER SUPERIOR VOLUMEN
*************/
 
/* Control de volumen */
.volume-control {
  margin: 20px auto 20px;
  text-align: center;
  width: 100%;
}

#volume-slider {
  -webkit-appearance: none;
  width: 280px;
  height: 14px;
  background: #ddd;
  border-radius: 30px;
  outline: none;
  transition: background 0.3s;
  accent-color: darkblue;
  cursor: pointer;
}

/* Punto del slider para Chrome, Safari, Edge */
#volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px; /* Ancho del punto */
  height: 24px; /* Alto del punto */
  border-radius: 50%; /* Lo hace redondo */
  background: darkblue; /* Color del punto */
  cursor: pointer;
}

/* Punto del slider para Firefox */
#volume-slider::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border: none; /* Quita el borde por defecto */
  border-radius: 50%;
  background: darkblue;
  cursor: pointer;
}

/*************
BOTONES BAJO EL PLAYER
*************/

/* 💻 ESCRITORIO (Reglas por defecto) */
    .botones-reproduccion {
      display: flex;
      gap: 10px;
      margin-bottom: 10px;
      width: auto; /* Evita que ocupen toda la pantalla */
    }

    .botones-reproduccion button {
      padding: 5px 10px;
      border-radius: 5px;
      border: 1px solid #ccc;
      background: #f0f0f0;
      cursor: pointer;
    }

    /* 📱 MÓVIL (Solo se activa en pantallas pequeñas) */
    @media (max-width: 600px) {
      .botones-reproduccion {
        width: 100%;
        justify-content: space-between;
        gap: 5px;
      }
      
      .botones-reproduccion button {
        flex: 1; /* Aquí es donde forzamos que se estiren por igual */
        padding: 10px 0;
        box-sizing: border-box;
      }
    }