/* Modal flotante */
    .audio-modal {
        width: 350px;
        background: #d9d9d9;
        border-radius: 20px;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
        position: fixed;
        top: 100px;
        left: 100px;
        z-index: 9999;
        user-select: none;
        transition: opacity 0.3s ease, transform 0.3s ease;
        overflow: hidden;
    }

    /* Oculto */
    .audio-modal.hidden {
        opacity: 0;
        pointer-events: none;
        transform: scale(0.9);
    }

    /* Header (zona draggable) */
    .audio-header {
        background: #9b9b9b;
        color: white;
        padding: 15px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-weight: bold;
        cursor: grab;
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
    }

    .close-btn {
        background: none;
        border: none;
        font-size: 20px;
        cursor: pointer;
    }

    /* Body */
    .audio-body {
        padding: 20px;
    }

    .audio-body h3 {
        margin-bottom: 20px;
    }

    /* Progress */
    .progress-container {
        margin: 20px 0;
    }

    #progress {
        width: 100%;
        appearance: none;
        height: 8px;
        border-radius: 10px;
        background: #eee;
        outline: none;
    }

    #progress::-webkit-slider-thumb {
        appearance: none;
        width: 18px;
        height: 18px;
        background: #ff3b30;
        border-radius: 50%;
        cursor: pointer;
        margin-top: -5px;
    }

    /* Time */
    .time-container {
        display: flex;
        justify-content: space-between;
        font-weight: bold;
        margin-bottom: 20px;
    }

    /* Controls */
    .controls {
        display: flex;
        justify-content: center;
        gap: 25px;
        margin-bottom: 20px;
    }

    .controls button {
        border: none;
        background: none;
        cursor: pointer;
    }

    /* Playlist */
    .playlist {
        border-top: 1px solid #bbb;
        padding-top: 10px;
        max-height: 15rem;
        overflow-y: scroll;
        scrollbar-width: thin;
        scrollbar-color: #acabab #c9c9c9;
    }

    .playlist::-webkit-scrollbar {
        width: 5px;
    }

/* 2. Estilo del fondo (Track) */
.playlist::-webkit-scrollbar-track {
  background: #f1f1f1;
    border-radius: 10px;
}

/* 3. Estilo de la barra que se mueve (Thumb) */
.playlist::-webkit-scrollbar-thumb {
  background: #ccc;
    border-radius: 10px;
}

.playlist::-webkit-scrollbar-thumb:hover {
    background: #888; /* Se oscurece al pasar el mouse */
}

    .track {
        padding: 10px 0;
        font-weight: bold;
    }

    .track.disabled {
        color: #aaa;
        cursor: pointer;
    }

    /*cuando el track esta desactivado al pasar el mouse se oscurece el texto*/
    .track.disabled:hover {
        color: #555;
    }

    .track.active {
        color: #000;
    }