body {
            padding-right: 0 !important;
            -webkit-overflow-scrolling: touch;
        }
        .link-home, .link-lang, .link-lang-burguer {
            color: white !important;
        }

        .header {
            background-color: transparent;
            position: sticky;
            top: 0px;
            left: 0px;
            z-index: 5000;
        }

        video {
            border-radius: 25px;
            background-color: #3c3c3b;
            background-image: url('../../images/navidad/boton_play.svg');
            background-repeat: no-repeat;
            background-position: center;
        }

        .flecha-lengua {
            animation: floatUpDown 2s ease-in-out infinite;
        }

        @keyframes floatUpDown {
            0%, 100% {
                transform: translateY(0);
            }
            50% {
                transform: translateY(-15px);
            }
        }

        /* Animación de parpadeo para el status de grabación */
        .recording {
            animation: blink 1s ease-in-out infinite;
            color: #ff0000;
            font-weight: bold;
        }

        @keyframes blink {
            0%, 100% {
                opacity: 1;
            }
            50% {
                opacity: 0.3;
            }
        }

        .texto-navidad {
            color: var(--doctaforum);
            font-weight: 900;
            font-family: Doctaforum-ExtraBold;
            font-size: 1.2rem;
            font-size: 38px;
            line-height: 40px;
            letter-spacing: -1px;
        }

        .btn-sound{
            background-color: #3c3c3c;
            color: white;
            border: 1px solid var(--doctaforum);
            border-radius: 35px;
            font-size: 1.35rem;
            display: flex;
            align-items: center;
            box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
            padding:15px 35px !important;
            cursor: pointer;
        }

        .btn-sound.hidden {
            display: none !important;
        }

        .hidden {
            display: none !important;
        }

        #btnSend, #btnDelete {
            padding:10px 25px !important;
            font-size: 1.25rem;
        }

        .timer{
            color: white;
            font-size: 1.5rem;
        }

    audio{
        display: block;
        border-radius: 35px;
        background-color: transparent !important;
    }

    .audio-player {
        background: transparent;
        padding: 0px 20px;
        border-radius: 35px;
        border:2px solid #3c3c3c;
        display: flex;
        align-items: center;
        gap: 15px;
        color: white;
        font-family: 'Arial', sans-serif;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
        max-width: 600px !important;
    }

#playPause {
    width: 50px;
    height: 50px;
    border: none;
    cursor: pointer;
    font-size: 34px;
    background: transparent;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.navidad-img{
    border-radius: 25px !important;
    -webkit-border-radius: 25px !important;
    -moz-border-radius: 25px !important;
    -ms-border-radius: 25px !important;
    -o-border-radius: 25px !important;
}

.time-display {
    font-size: 16px;
    color: white;
    white-space: nowrap;
    min-width: 80px;
    text-align: center;
}

/* Estilos para los sliders */
input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    height: 2px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 3px;
    outline: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

input[type="range"]:hover {
    background: rgba(255, 255, 255, 0.4);
}

/* Thumb del slider para Webkit */
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    background: white;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}

input[type="range"]::-webkit-slider-thumb:hover {
    transform: scale(1.2);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Thumb del slider para Firefox */
input[type="range"]::-moz-range-thumb {
    width: 16px;
    height: 16px;
    background: white;
    border-radius: 50%;
    cursor: pointer;
    border: none;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}

/* Seekbar específico */
#seekBar {
    flex: 1;
    min-width: 80px;
}

/* Volume bar específico */
#volumeBar {
    min-width: 40px;
}

/* Contenedor de volumen */
.volume-container {
    display: flex;
    align-items: center;
    gap: 8px;
}

.volume-icon {
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 5px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}


        .volume-icon {
            width:100% !important;
            background: transparent;
            border:none;
            max-width:30px !important;
            max-height:30px !important;
        }
        .player-icon {
            width:100% !important;
            max-width:40px !important;
            max-height:40px !important;
        }

        /* Estilos específicos para los reproductores de sonidos */
        .sound-play-pause {
            width: 50px;
            height: 50px;
            border: none;
            cursor: pointer;
            font-size: 34px;
            background: transparent;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .sound-volume-icon {
            font-size: 16px;
            cursor: pointer;
            transition: all 0.3s ease;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100% !important;
            background: transparent;
            border: none;
            max-width: 30px !important;
            max-height: 30px !important;
        }

        /* Estilos para los sliders de sonidos - mismos que el reproductor principal */
        .sound-seek-bar {
            flex: 1;
            min-width: 80px;
            -webkit-appearance: none;
            appearance: none;
            height: 2px;
            background: rgba(255, 255, 255, 0.3);
            border-radius: 3px;
            outline: none;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .sound-volume-bar {
            min-width: 40px;
            -webkit-appearance: none;
            appearance: none;
            height: 2px;
            background: rgba(255, 255, 255, 0.3);
            border-radius: 3px;
            outline: none;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        /* Thumbs para los sliders de sonidos */
        .sound-seek-bar::-webkit-slider-thumb,
        .sound-volume-bar::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 16px;
            height: 16px;
            background: white;
            border-radius: 50%;
            cursor: pointer;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
            transition: all 0.3s ease;
        }

        .sound-seek-bar::-moz-range-thumb,
        .sound-volume-bar::-moz-range-thumb {
            width: 16px;
            height: 16px;
            background: white;
            border-radius: 50%;
            cursor: pointer;
            border: none;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
            transition: all 0.3s ease;
        }

        .sound-seek-bar:hover,
        .sound-volume-bar:hover {
            background: rgba(255, 255, 255, 0.4);
        }

        .sound-seek-bar::-webkit-slider-thumb:hover,
        .sound-volume-bar::-webkit-slider-thumb:hover {
            transform: scale(1.2);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
        }

        /* Estilos para cada reproductor individual */
        .audio-player[id^="audioPlayer_"] {
            background: transparent;
            padding: 0px 20px;
            border-radius: 35px;
            border: 2px solid #3c3c3c;
            display: flex;
            align-items: center;
            gap: 15px;
            color: white;
            font-family: 'Arial', sans-serif;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
            max-width: 600px !important;
            margin-bottom: 15px;
        }

        /* Estilos para asegurar que cada reproductor se vea correctamente */
        .volume-container {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        

        .draw-1{
            top: 12%;
            left: 6%;
            width:330px !important;
        }

        .draw-2{
            bottom: 8%;
            left: 18%;
            width: 470px !important;
        }

        .draw-3-resp{
            top: 37%;
            right: 16%;
            width: 200px !important;
        }
        
        @media (max-width: 1800px) {

            .draw-1{
                width:270px !important;
            }

            .draw-2{
                width: 375px !important;
            }
            
            .draw-3-resp{
                top: 37%;
                right: 16%;
                width: 180px !important;
            }
        }

        @media (max-width: 1600px) {

            .draw-1{
                top: 15%;
                left: 7%;
                width:235px !important;
            }
            
            .draw-2{
                width: 350px !important;
            }

            .draw-3-resp{
                top: 37%;
                right: 16%;
                width: 155px !important;
            }
        }

        @media (max-width: 1400px) {

            .draw-1{
                width:195px !important;
            }

            .draw-2{
                width: 300px !important;
            }
            
            .draw-3-resp{
                top: 37%;
                right: 15%;
                width: 145px !important;
            }
        }

        
        @media (max-width: 1300px) {

            .draw-2{
                width: 275px !important;
            }
            
            .draw-3-resp{
                top: 37%;
                right: 15%;
                width: 130px !important;
            }
        }
        
        @media (max-width: 1200px) {

            .draw-1{
                top: 14%;
                left: 4%;
                width:212px !important;
            }

            
            .draw-2{
                left: 15%;
                width: 275px !important;
            }

            .draw-3-resp{
                top: 37%;
                right: 16%;
                width: 130px !important;
            }
        }


        @media (max-width: 1000px) {

            .draw-1{
                top: 16%;
                left: 4%;
                width: 185px !important;
            }

            .draw-2{
                left: 15%;
                width: 250px !important;
            }

            .draw-3-resp{
                top: 37%;
                right: 15%;
                width: 130px !important;
            }
        }

        @media (max-width: 900px) {

            .draw-1{
                top: 16%;
                left: 4%;
                width: 170px !important;
            }

            
            .draw-2{
                left: 15%;
                width: 225px !important;
            }

            .draw-3-resp{
                top: 37%;
                right: 14%;
                width: 115px !important;
            }
        }

        @media (max-width: 768px) {
            .draw-1 {
                top: 6%;
                left: 16%;
                width: 420px !important;
            }

            .draw-2-resp {
                top: 49%;
                right: 52%;
                width: 255px !important;
            }

            .draw-3-resp {
                top: 80%;
                right: 49%;
                width: 285px !important;
            }
            
        video {
            border-radius: 10px;
            -webkit-border-radius: 10px;
            -moz-border-radius: 10px;
            -ms-border-radius: 10px;
            -o-border-radius: 10px;
}
        }

        @media (max-width: 700px) {
          .draw-1 {
                top: 6%;
                left: 16%;
                width: 350px !important;
            }
            
            .draw-2-resp {
                top: 48%;
                right: 49%;
                width: 240px !important;
            }

            .draw-3-resp {
                top: 80%;
                right: 49%;
                width: 245px !important;
            }
        }

        
        @media (max-width: 600px) {
          .draw-1 {
                top: 6%;
                left: 16%;
                width: 285px !important;
            }

            .draw-2-resp {
                top: 47%;
                right: 49%;
                width: 215px !important;
            }
            
            .draw-3-resp {
                top: 80%;
                right: 49%;
                width: 200px !important;
            }

        }

        
        @media (max-width: 500px) {
          .draw-1 {
                top: 6%;
                left: 16%;
                width: 255px !important;
            }

            .draw-2-resp {
                top: 46.5%;
                right: 48%;
                width: 176px !important;
            }
            
            .draw-3-resp {
                top: 80%;
                right: 49%;
                width: 175px !important;
            }
        }

        @media (max-width: 400px) {
            .draw-1 {
                top: 5%;
                left: 13%;
                width: 230px !important;
            }

            .draw-2-resp {
                top: 47%;
                right: 49%;
                width: 155px !important;
            }

            .draw-3-resp {
                top: 80%;
                right: 49%;
                width: 155px !important;
            }
        }





        @media (max-width: 768px) {
            .flecha-lengua {
                max-width: 50px !important;
            }

            #btnSend, #btnDelete {
                padding: 5px 15px !important;
                font-size: .9rem;
            }

            .btn-record, .btn-sound{
                padding:5px 15px !important;
                font-size: .9rem;
            }

            .btn-record img{
                max-width:10px !important;
                margin-left:15px !important;
            }

            .texto-navidad {
                font-size: 22px;
                line-height: 24px;
            }

            .audio-player {
                background: transparent;
                border-radius: 35px;
                border: 2px solid #3c3c3c;
                display: flex;
                align-items: center;
                gap: 15px;
                color: white;
                font-family: 'Arial', sans-serif;
                box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
                max-width: 600px !important;
            }

            .time-display {
                font-size: 12px;
                max-width: 60px;
                min-width: 40px !important;
            }
        }

        .swal2-container {
            z-index: 10000 !important;
        }

        .swal2-popup {
            font-family: Doctaforum-Bold !important;
            z-index: 10000 !important;
        }

        .swal2-loader{
            color:var(--doctaforum) !important;
            border-color: var(--doctaforum) transparent !important;
        }