/* Estilos muy básicos y adaptables */
.audio-player {
    max-width: 400px;
    margin: 20px auto;
    padding: 15px;
    border: 1px solid #ccc;
    border-radius: 50px;
    background-color: #f9f9f9;
}

.controles {
    display: flex;
    align-items: center;
    gap: 10px;
    /* Para dispositivos móviles, asegura que todo quepa */
    flex-wrap: wrap; 
}

#playPauseBtn {
cursor: pointer;
  border-radius: 50px;
  background-color: #eae2d6;
  color: #611232 !important;
  width: 150px;
  height: 50px;
  font-size: 1em;
  font-weight: normal;
  justify-content: center;
  align-items: center;
  cursor: pointer !important;
  transition: background-color 0.3s ease;
  padding: 0em;
  box-shadow: inset 0 0 0 1px #611232;
  line-height: 2em;
}

#playPauseBtn:hover {
cursor: pointer;
  border-radius: 50px;
  background-color:  #611232 !important;
  color: white !important;
  width: 150px;
  height: 50px;
  font-size: 1em;
  font-weight: normal;
  justify-content: center;
  align-items: center;
  cursor: pointer !important;
  transition: background-color 0.3s ease;
  padding: 0em;
  box-shadow: inset 0 0 0 1px #611232;
  line-height: 2em;
}

#playPauseBtn #texto{
font-family: "Noto Sans", "Noso Sans", serif, "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 200;
  font-size: 18px;
  line-height: -1;
  color: #404041;
    letter-spacing: 0.1em;
    text-transform: none;
    padding-top:-15px;
}
#playPauseBtn:hover #texto {
color:white;
}
.progreso-contenedor {
    display: flex;
    align-items: center;
    flex-grow: 1; /* Para que ocupe el espacio restante */
}

#progresoBarra {
    flex-grow: 1;
    cursor: pointer;
    margin-right: 5px;
}

/* --- ESTILOS PARA LA BARRA DE PROGRESO (INPUT TYPE="RANGE") --- */

/* Aseguramos una altura y margen para que no se oculte */
#progresoBarra {
    flex-grow: 1;
    cursor: pointer;
    margin-right: 5px;
    /* Estilos básicos de visualización */
    height: 8px; /* Altura de la pista */
    -webkit-appearance: none; /* Necesario para personalizar en Chrome/Safari */
    background: #ddd; /* Color de fondo de la pista */
    border-radius: 4px;
    outline: none; /* Quitar el contorno al hacer clic */
}

/* Estilos para el "track" (la pista o fondo de la barra) en navegadores basados en WebKit (Chrome, Safari) */
#progresoBarra::-webkit-slider-runnable-track {
    width: 100%;
    height: 8px;
    background: #ddd;
    border-radius: 4px;
}

/* Estilos para el "thumb" (el deslizador o "mango") en navegadores basados en WebKit */
#progresoBarra::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px; /* Ancho del deslizador */
    height: 16px; /* Alto del deslizador */
    border-radius: 50%; /* Lo hace redondo */
    background: #007bff; /* Color del deslizador (puedes elegir el que quieras) */
    cursor: pointer;
    margin-top: -4px; /* Centra el deslizador en la pista */
}

/* Estilos para navegadores basados en Firefox */
#progresoBarra::-moz-range-track {
    width: 100%;
    height: 8px;
    background: #ddd;
    border-radius: 4px;
}

#progresoBarra::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #007bff;
    cursor: pointer;
    border: none;
}