/* Reproductor */
.player-container {
    display:flex;
    justify-content:center;
    align-items:center;
    padding:15px;
    text-align:center;
    position:fixed;
    bottom:0; left:0; right:0;

    #startButton {
        padding:10px 20px;
        font-size:1.6rem;
        background:transparent;
        border:none;
        color:var(--accent);
        font-weight:bold;
        text-transform:uppercase;
        border-radius:50px;
        cursor:pointer;
        transition:all 0.3s ease;
        &:hover {
            color:#fff;
        }
    }

    .player {
        background:rgba(0,0,0,0.8);
        border-radius:8px;
        padding:20px;
        width:100%;
        max-width:300px;

        .controls-row {
            display:flex;
            align-items:center;
            gap:20px;


            .icono {
                display:inline-block;
                margin-top:7px;
                width:20px;
                height:20px;
                background-color:white;
                mask-image:url('../../img/icono_g.svg');
                -webkit-mask-size:contain;
                mask-size:contain;
                -webkit-mask-repeat:no-repeat;
                mask-repeat:no-repeat;
                -webkit-mask-position:center;
                mask-position:center;
            }

            .icono-play .icono {
                mask-image:url('../../img/icono_play.svg');
            }
            .icono-pause .icono {
                mask-image:url('../../img/icono_pause.svg');
            }
            .icono-volume .icono {
                mask-image:url('../../img/icono_volume.svg');
            }
            .icono-alert .icono {
                mask-image:url('../../img/icono_alert.svg');
            }

            button:hover .icono { background-color:black; }


            .btn-play {
                background:none;
                border:1px solid rgba(255,255,255, 0.4);
                color:#fff;
                width:50px;
                height:50px;
                cursor:pointer;
                transition:all 0.2s;
                font-size:1.2rem;
                flex-shrink:0;
                border-radius:4px;
                &:hover {
                    background:#fff;
                    color:#000;
                }
                &:active { transform:scale(0.95); }
            }


            .volume-control {
                position:relative;
                flex-shrink:0;

                .btn-volume {
                    background:none;
                    border:1px solid rgba(255,255,255, 0.4);
                    width:50px;
                    height:50px;
                    cursor:pointer;
                    transition:all 0.2s;
                    border-radius:4px;
                    &:hover {
                        background:#fff;
                        color:#000;
                    }
                }


                .slider-popup {
                    position:absolute;
                    bottom:calc(100% + 10px);
                    left:50%;
                    transform:translateX(-50%);
                    background:#000;
                    border:1px solid #fff;
                    padding:15px 10px;
                    display:none;
                    flex-direction:column;
                    align-items:center;
                    gap:10px;
                    z-index:10;

                    &.active {
                        display:flex;
                    }

                    &::after {
                        content:'';
                        position:absolute;
                        top:100%;
                        left:50%;
                        transform:translateX(-50%);
                        width:0;
                        height:0;
                        border-left:5px solid transparent;
                        border-right:5px solid transparent;
                        border-top:5px solid #fff;
                    }

                    .slider-vertical {
                        writing-mode:vertical-lr;
                        direction:rtl;
                        width:2px;
                        height:100px;
                        background:#fff;
                        outline:none;
                        &::-webkit-slider-thumb {
                            -webkit-appearance:none;
                            appearance:none;
                            width:12px;
                            height:12px;
                            background:#fff;
                            cursor:pointer;
                            border:1px solid #000;
                        }
                        &::-moz-range-thumb {
                            width:12px;
                            height:12px;
                            background:#fff;
                            cursor:pointer;
                            border:1px solid #000;
                        }
                    }

                    .slider-value {
                        font-size:11px;
                        color:#fff;
                        min-width:30px;
                        text-align:center;
                    }
                }
            }

            .time-display {
                font-size:1.2rem;
                color:#fff;
                letter-spacing:2px;
                flex-grow:1;
                text-align:right;
            }
        }

        audio { display:none; }

    }

}