/* analyzer.css */
/* Estilo para el botón */
#playButton {
    font-size: 20px !important;                /* Forzar tamaño del texto */
    padding: 5px 5px;                        /* Ajustar tamaño del botón si es necesario */
    background-color: rgba(255, 0, 149, 0.575);      /* Fondo azul con transparencia */
    color: white;                            /* Color del texto */
    border: none;                              /* Quita el borde del botón */
    border-radius: 8px;                        /* Bordes redondeados */
    cursor: pointer;                           /* Cambia el cursor al pasar sobre el botón */
    width: 320px;                              /* Ancho del botón */
    height: 71px;                              /* Altura del botón */
    transition: transform 0.2s ease, background-color 0.2s ease;  /* Transiciones suaves */
  }

  /* Efecto al pasar el ratón por el botón */
  #playButton:hover {
    background-color: rgb(255, 0, 140);         /* Más transparencia al pasar el ratón */
    transform: scale(1.0);                            /* Agranda ligeramente el botón */
  }

  /* Efecto al hacer clic en el botón */
  #playButton:active {
    background-color: rgba(255, 230, 0, 0.9); /* Menos transparencia al hacer clic */
    transform: scale(1);                        /* Vuelve al tamaño normal */
  }


audio {
    transform: scale(1.0);   /* Escala el reproductor al 71% */
    width: 100%;              /* Tamaño del reproductor */
    margin-top: 0px;          /* Espacio superior */
}

/* Cambiar el color del fondo del reproductor */
div {
    background-color: transparent; /* Color de fondo */
}

/* Cambiar el color del fondo del contenedor de los controles de audio */
audio::-webkit-media-controls-panel {
    background-color: transparent; /* Color de fondo del contenedor de los controles */
}

/* Cambiar el radio de las esquinas del contenedor de los controles de audio */
audio::-webkit-media-controls-panel {
    border-radius: 3px;            /* Radio de las esquinas */
}

/* Estilo para los controles de audio */
audio::-webkit-media-controls {
    background-color: transparent; /* Color de fondo de los controles */
    margin-top: 0px;               /* Espacio superior */
}

/* Estilo para los botones del reproductor */
audio::-webkit-media-controls-play-button {
    background-color:  #ff4d6d;  /* Color de fondo del botón de reproducir */
    border-radius: 50%;           /* Hacer el botón circular */
    width: 10px;                  /* Ancho del botón */
    height: 35px;                 /* Altura del botón */
    border: 10px;                 /* Eliminar el borde */
    
}

audio::-webkit-media-controls-pause-button {
    /* background-color: #7a7a7a; /* Color de fondo del botón de pausa */
    margin-top: 0px;              /* Espacio superior */
}

audio::-webkit-media-controls-volume-slider {
    /* background-color: #ececec;  /* Color de fondo del control de volumen */
    margin-top: 0px;             /* Espacio superior */
}

/* Estilo para el texto personalizado */
p {
    margin-top: 0px;             /* Espacio superior */
    color: rgba(255, 2, 107, 0.774);   /* Color del boton play */
    font-size: 13px;             /* Tamaño del texto */
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;          /* Alineación del texto */
    margin: 0;                   /* Margen cero */
    padding: 0;                  /* Relleno cero */
    margin-top: 0px;             /* Espacio superior */
    background-color: #ffffff; /* Fondo blanco */
}

#canvas {
    align: center;
    width: 100%;                  /* Puedes ajustar el ancho del espectrum según lo necesites */
    height: 71px;                /* Ajusta la altura del cuadro del analizador */
    background-color: rgba(0, 0, 0, 0);   /* Cambia el color de fondo a transparente */
  }