@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css");

.reproductor {
  position: relative;
  z-index: 1;
  
  width: 320px;              /* tamaño chico tipo widget */
  aspect-ratio: 800 / 500;   /* mantiene proporción de tu imagen */

  padding: 20px;
  border-radius: 20px;

  background-image: url("img/marcomp3.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  color: white;
  font-family: sans-serif;
  
  filter: drop-shadow(0 0 15px rgba(255,255,255,0.3));
  
}

.controles button {
  background: transparent;
  border: none;
  color: white;
  font-size: 20px;
  margin: 0 10px;
  cursor: pointer;

  transition: transform 0.2s, color 0.2s;
}

.controles button:hover {
  transform: scale(1.2);
  color: #00c3ff;
}

#progreso {
  width: 60%;
  max-width: 220px;
  margin: 10px auto;
  accent-color: #00c3ff;
}