/* Estilos generales */
        body {
            font-family: 'Poppins', sans-serif;
            user-select: none;
        }

        /* Estilos para las entradas de canciones */
        .song-item {
            margin-bottom: 1.5rem;
            border: 1px solid rgba(0, 0, 0, 0.1); /* Borde más sutil para fondo blanco */
            border-radius: .5rem; /* Bordes más redondeados */
            background-color: #e1e1e1; /* Fondo de la tarjeta */
            color: #000; /* Texto de la tarjeta oscuro por defecto */
            padding: 1rem;
            display: flex;
            align-items: center;
            box-shadow: 0 .125rem .25rem rgba(0,0,0,.075); /* Sombra ligera */
            transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
        }

        .song-item:hover {
            transform: translateY(-5px); /* Efecto hover */
            box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
        }

        .song-image-container {
            flex-shrink: 0;
            margin-right: 1rem;
        }

        .song-image-container img {
            width: 100px;
            height: 100px;
            object-fit: cover;
            border-radius: .35rem; /* Bordes más redondeados para la imagen */
        }

        .song-details {
            flex-grow: 1;
        }

        .song-details h5 {
            margin-bottom: 0.25rem;
            font-size: 1.25rem;
            color: #d93025; /* Color del título (rojo oscuro) */
            font-weight: 700;
        }

        .song-details p {
            font-size: 0.85rem; /* Tamaño de fuente ligeramente más pequeño para la fecha */
            color: #666; /* Color para la fecha (gris oscuro) */
            margin-bottom: 0;
        }

        /* Paginación */
        .pagination-container {
            margin-top: 2rem;
            display: flex;
            justify-content: center;
        }
        .page-link {
            color: #000; /* Links de paginación oscuros para fondo blanco */
        }
        .page-item.active .page-link {
            background-color: #d93025; /* Botón activo en rojo */
            border-color: #d93025;
            color: #fff; /* Texto blanco en botón activo */
        }
        .page-item.active .page-link:hover {
            background-color: #b3261c; /* Rojo más oscuro en hover para activo */
            border-color: #b3261c;
        }
        .page-link:hover {
            color: #000;
            background-color: #e9ecef;
        }

        /* Header y Offcanvas */
        .header-custom {
            background-color: #212529; /* Fondo oscuro para el encabezado */
            padding: 1rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .header-custom .btn {
            color: #fff;
            font-size: 1.5rem;
        }
        .cropped-favicon {
            width: 145px;
            height: 50px;
            object-fit: cover;
            background-size: cover;
            margin: auto;
            max-height: 60px;
            max-width: 250px;
        }

        /* Offcanvas personalizados */
        .offcanvas-custom {
            background-color: #111; /* Fondo oscuro similar al sidenav original */
            color: #818181;
        }
        .offcanvas-custom .offcanvas-header {
            background-color: #111;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }
        .offcanvas-custom .offcanvas-title {
            color: #fff;
        }
        .offcanvas-custom .btn-close {
            filter: invert(1); /* Para que la 'x' sea visible en fondo oscuro */
        }
        .offcanvas-custom .nav-link {
            padding: 0.8rem 1.5rem;
            color: #818181;
            font-size: 1.25rem;
        }
        .offcanvas-custom .nav-link:hover {
            color: #f1f1f1;
            background-color: rgba(255, 255, 255, 0.05);
        }
        .offcanvas-custom .form-control {
            background-color: #333;
            border: none;
            color: #fff;
        }
        .offcanvas-custom .form-control::placeholder {
            color: #bbb;
        }
        .offcanvas-custom .btn-primary {
            background-color: #007bff;
            border-color: #007bff;
        }
        .offcanvas-custom .btn-primary:hover {
            background-color: #0056b3;
            border-color: #0056b3;
        }
/* Estilos para el modal de compartir */
                .modal {
                    display: none; /* Oculto por defecto */
                    position: fixed; /* Posición fija en la pantalla */
                    z-index: 1050; /* Z-index alto para estar sobre otros elementos */
                    left: 0;
                    top: 0;
                    width: 100%;
                    height: 100%;
                    overflow: auto; /* Habilitar scroll si el contenido es grande */
                    background: rgba(0, 0, 0, 0.7); /* Fondo oscuro semitransparente */
                    backdrop-filter: blur(8px); /* Efecto de desenfoque en el fondo */
                    -webkit-backdrop-filter: blur(8px);
                    display: flex; /* Usar flexbox para centrar el contenido */
                    align-items: center; /* Centrar verticalmente */
                    justify-content: center; /* Centrar horizontalmente */
                }

                .modal-content {
                    background-color: #212529; /* Fondo oscuro consistente con el header/offcanvas */
                    color: #fff; /* Texto blanco */
                    margin: auto; /* Centrar el bloque */
                    padding: 2rem; /* Más padding para mejor aspecto */
                    border: 1px solid rgba(255, 255, 255, 0.1);
                    border-radius: .75rem; /* Bordes más redondeados */
                    width: 90%; /* Ancho responsive */
                    max-width: 500px; /* Ancho máximo */
                    position: relative;
                    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.3); /* Sombra para profundidad */
                    animation: fadeInScale 0.3s ease-out; /* Animación de entrada */
                }

                @keyframes fadeInScale {
                    from {
                        opacity: 0;
                        transform: scale(0.9);
                    }
                    to {
                        opacity: 1;
                        transform: scale(1);
                    }
                }

                .close {
                    color: #fff; /* Color de la 'x' blanca */
                    float: right;
                    font-size: 2rem; /* Tamaño más grande para la 'x' */
                    font-weight: bold;
                    line-height: 1;
                    position: absolute; /* Posicionamiento absoluto */
                    top: 1rem;
                    right: 1.5rem;
                    cursor: pointer;
                    transition: color 0.2s ease;
                }

                .close:hover, .close:focus {
                    color: #d93025; /* Cambiar a rojo en hover */
                    text-decoration: none;
                }

                .modal-content h2 {
                    color: #d93025; /* Título del modal en rojo */
                    margin-bottom: 1rem;
                    font-size: 1.8rem; /* Tamaño de fuente más grande */
                }

                .modal-content p {
                    color: #ccc; /* Texto del párrafo en gris claro */
                    margin-bottom: 1.5rem;
                }

                #shareLink {
                    width: 100%;
                    padding: 0.75rem;
                    margin-bottom: 1rem;
                    border: 1px solid #444; /* Borde oscuro para el input */
                    border-radius: .5rem;
                    font-size: 1rem;
                    background-color: #333; /* Fondo oscuro para el input */
                    color: #eee; /* Texto claro para el input */
                    box-sizing: border-box;
                }

                /* Estilos para los botones (usando clases de Bootstrap y ajustando colores) */
                #shareButton.btn-primary {
                    background-color: #d93025; /* Botón Compartir en rojo */
                    border-color: #d93025;
                    color: #fff;
                    font-weight: bold;
                    padding: 0.75rem 1.5rem;
                    border-radius: .5rem;
                    margin-right: 0.5rem;
                    transition: background-color 0.2s ease, border-color 0.2s ease;
                }
                #shareButton.btn-primary:hover {
                    background-color: #b3261c; /* Rojo ms oscuro en hover */
                    border-color: #b3261c;
                }

                #copyLink.btn-secondary {
                    background-color: #6c757d; /* Botón Copiar en gris */
                    border-color: #6c757d;
                    color: #fff;
                    font-weight: bold;
                    padding: 0.75rem 1.5rem;
                    border-radius: .5rem;
                    margin-right: 0.5rem;
                    transition: background-color 0.2s ease, border-color 0.2s ease;
                }
                #copyLink.btn-secondary:hover {
                    background-color: #5a6268; /* Gris más oscuro en hover */
                    border-color: #5a6268;
                }

                #installButton.btn-success {
                    background-color: #28a745; /* Botn Instalar en verde */
                    border-color: #28a745;
                    color: #fff;
                    font-weight: bold;
                    padding: 0.75rem 1.5rem;
                    border-radius: .5rem;
                    margin-top: 1rem; /* Espacio superior */
                    transition: background-color 0.2s ease, border-color 0.2s ease;
                }
                #installButton.btn-success:hover {
                    background-color: #218838; /* Verde más oscuro en hover */
                    border-color: #218838;
                }
                /* Asegurar que los botones se comporten bien en móvil */
                @media (max-width: 576px) {
                    #shareButton, #copyLink, #installButton {
                        display: block; /* Ocupan todo el ancho */
                        width: 100%;
                        margin-right: 0 !important; /* Eliminar margen derecho */
                        margin-bottom: 0.5rem; /* Espacio entre botones */
                    }
                    #installButton {
                        margin-top: 0.5rem; /* Ajustar margen en mvil */
                    }
                }


                .social-links {
                    margin-top: 2rem;
                    padding-top: 1.5rem;
                    border-top: 1px solid rgba(255, 255, 255, 0.1); /* Separador */
                    text-align: center;
                }

                .social-links h3 {
                    color: #d93025; /* Título de Siguenos en rojo */
                    margin-bottom: 1rem;
                    font-size: 1.5rem;
                }

                .social-links a {
                    display: inline-flex;
                    align-items: center;
                    margin: 0 10px; /* Espacio horizontal entre iconos */
                    text-decoration: none;
                    color: #eee; /* Color del texto del enlace blanco-grisáceo */
                    font-weight: 600;
                    transition: color 0.2s ease;
                }

                .social-links a:hover {
                    color: #fff; /* Blanco puro en hover */
                }

                .social-links svg {
                    width: 28px; /* Iconos un poco más grandes */
                    height: 28px;
                    margin-right: 8px; /* Espacio a la derecha del SVG */
                    vertical-align: middle;
                    fill: #fff; /* Asegura que los SVGs sean blancos por defecto */
                    transition: fill 0.2s ease;
                }

                /* Colores de los SVGs específicos de cada red social en hover */
                .social-links a[href*="instagram.com"] svg:hover {
                    fill: #E1306C; /* Instagram color */
                }
                .social-links a[href*="whatsapp.com"] svg:hover {
                    fill: #25D366; /* WhatsApp color */
                }
                .social-links a[href*="youtube.com"] svg:hover {
                    fill: #FF0000; /* YouTube color */
                }
                .social-links a[href*="facebook.com"] svg:hover {
                    fill: #1877F2; /* Facebook color */
                }

                /* Asegurar que el scroll no se active en el body cuando el modal está abierto */
                body.modal-open {
                    overflow: hidden;
                }

                /* Media query para ajustar el margen en pantallas grandes si es necesario */
                @media (min-width: 768px) {
                    .modal-content {
                        margin-top: 5%; /* Ajustar la posición superior en desktop si lo deseas */
                    }
                }
                /* Estilos para la lista de tracks dentro de una categoría (modo scroll) */
.track-list-scrollable {
    max-height: 500px; /* Altura máxima para el scroll */
    overflow-y: auto; /* Habilitar scroll vertical */
    padding-right: 15px; /* Espacio para la barra de scroll */
}

/* Estilos para los elementos de la lista de tracks */
.track-list-scrollable li {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1); /* Separador entre tracks */
    transition: background-color 0.2s ease;
}

.track-list-scrollable li:last-child {
    border-bottom: none; /* Eliminar borde del último elemento */
}

.track-list-scrollable li:hover {
    background-color: #f8f9fa; /* Fondo ligeramente claro en hover */
}

.track-list-scrollable .text-primary {
    color: #d93025 !important; /* Icono de música en rojo oscuro */
}

.track-list-scrollable .bullet-point {
    font-size: 1.5rem;
    line-height: 1;
    color: #d93025; /* Bullet point en rojo oscuro */
    vertical-align: middle;
}

/* Estilos para las tarjetas de categoría */
.category-card {
    border: none;
    border-radius: 0.75rem; /* Bordes redondeados */
    overflow: hidden; /* Asegurar que nada se desborde */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    height: 100%; /* Para que todas las tarjetas tengan la misma altura en la fila */
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centrar contenido verticalmente */
}

.category-card:hover {
    transform: translateY(-5px); /* Efecto hover */
    box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.2); /* Sombra más pronunciada */
}

.category-card-body {
    padding: 1.5rem; /* Padding interno */
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-grow: 1;
}

.category-card .card-title {
    font-size: 1.3rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
    color: #fff; /* Título blanco para contrastar con el fondo de color */
}

.category-card-downloads {
    font-size: 0.9rem;
    opacity: 0.9; /* Ligeramente transparente */
    color: rgba(255, 255, 255, 0.8); /* Texto de descargas en blanco semitransparente */
}

/* Ajustes para el badge de descargas en la lista de tracks */
.track-list-scrollable .badge {
    font-size: 0.8em; /* Tamaño más pequeño para el badge */
    vertical-align: middle;
    background-color: #6c757d !important; /* Color secundario para el badge */
    color: #fff !important;
}
/* Estilos para la página mp3.php */
.player-container {
    /* background-color: #e1e1e1; */
    /* border-radius: 1rem; */
    padding: 2rem;
    border: 1px solid rgb(0 0 0 / 13%);
    border-radius: .25rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2);
    color: #fff;
}

.player-title h1 {
    color: #d93025; /* Título principal en rojo */
    font-size: 2rem;
    margin-bottom: 1.5rem;
    word-break: break-word; /* Para evitar desbordamiento en títulos largos */
}

.cover-mp3 {
    width: 250px; /* Tamao fijo para el cover */
    height: 250px;
    margin: 0 auto 1.5rem auto; /* Centrar y añadir margen inferior */
    border-radius: 0.75rem;
    overflow: hidden;
    box-shadow: 0 0.3rem 0.6rem rgba(0, 0, 0, 0.2);
}

.cover-mp3 .image-mp3 {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
}

/* Botones principales (Escuchar, Descargar) */
.buttons-mp3 .btn-mp3 {
    width: 100%; /* Ancho completo para dispositivos pequeños */
    font-size: 1.1rem;
    padding: 0.8rem 1.5rem;
    border-radius: 0.5rem;
    margin-bottom: 1rem; /* Espacio entre botones */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    font-weight: bold;
}

.buttons-mp3 .btn-mp3 .text-btn {
    display: flex;
    align-items: center;
}

.buttons-mp3 .btn-mp3 i {
    margin-right: 0.5rem;
}

/* Colores específicos de los botones */
#sync-play-hls {
    background-color: #d93025; /* Rojo */
    border-color: #d93025;
    color: #fff;
}
#sync-play-hls:hover {
    background-color: #b3261c;
    border-color: #b3261c;
}

#primaryDownload {
    background-color: #007bff; /* Azul */
    border-color: #007bff;
    color: #fff;
}
#primaryDownload:hover {
    background-color: #0056b3;
    border-color: #0056b3;
}

.text-count {
    font-size: 1.1rem;
    color: #bbb; /* Gris claro para el texto de descargas */
    margin-bottom: 1.5rem;
}

/* Botones de navegación (Anterior/Siguiente) */
.navigator-mp3 {
    display: inline-block;
    padding: 0.6rem 1.2rem;
    background-color: #6c757d; /* Gris secundario */
    color: #fff;
    border-radius: 0.5rem;
    text-decoration: none;
    margin: 0 0.5rem;
    transition: background-color 0.2s ease;
}
.navigator-mp3:hover {
    background-color: #5a6268;
    color: #fff;
}

/* Controles de audio del reproductor flotante (#base-controls) */
#base-controls {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #1a1a1a; /* Fondo muy oscuro para el reproductor fijo */
    color: #fff;
    padding: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex; /* Asegurar que sea flex para el layout */
    align-items: center;
    justify-content: space-between;
    z-index: 1040; /* Z-index para estar sobre el pie de página pero debajo del modal */
    flex-wrap: wrap; /* Permitir que los elementos se envuelvan en pantallas pequeñas */
}

.info-audio-hls {
    display: flex;
    align-items: center;
    flex-grow: 1; /* Permite que ocupe espacio disponible */
    min-width: 150px; /* Ancho mínimo para info de audio */
}

.info-audio-hls .image-audio {
    width: 50px;
    height: 50px;
    background-size: cover;
    background-position: center;
    border-radius: 0.5rem;
    margin-right: 0.75rem;
}

.info-audio-hls .info-title {
    font-weight: bold;
    color: #d93025; /* Título de la cancin en rojo */
    white-space: nowrap; /* Evita que el texto se rompa */
    overflow: hidden;
    text-overflow: ellipsis; /* Añade puntos suspensivos si el texto es muy largo */
}

.info-audio-hls .info-artist {
    font-size: 0.85rem;
    color: #ccc;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.controls-hls {
    display: flex;
    align-items: center;
    flex-grow: 2; /* Mayor crecimiento para los controles principales */
    justify-content: center;
    margin: 0.5rem 1rem; /* Margen para separacin */
}

.controls-hls .btn-controls-hls button {
    background: none;
    border: none;
    color: #fff;
    font-size: 1.5rem;
    margin: 0 0.75rem;
    cursor: pointer;
    transition: color 0.2s ease;
}

.controls-hls .btn-controls-hls button:hover {
    color: #d93025; /* Rojo en hover */
}

.progress-hls {
    display: flex;
    align-items: center;
    flex-grow: 3; /* El progreso es el que más crece */
}

.progress-hls .count-hls {
    font-size: 0.85rem;
    color: #ccc;
    white-space: nowrap;
    width: 40px; /* Un ancho suficiente para "99:59" */
    text-align: center; /* Centrar el texto dentro del ancho fijo */
}

/* Volumen */
.volume-hls {
    display: flex;
    align-items: center;
    flex-grow: 1; /* Permite que ocupe espacio disponible */
    min-width: 120px; /* Ancho mínimo para el control de volumen */
    justify-content: flex-end; /* Alinear a la derecha */
}

.volume-hls #icon-volume-hls {
    background: none;
    border: none;
    color: #fff;
    font-size: 1.3rem;
    cursor: pointer;
    margin-right: 0.5rem;
    width: 30px; /* Ancho fijo para el icono */
    height: 30px; /* Altura fija para el icono */
    display: flex; /* Usar flexbox para centrar el icono si es necesario */
    align-items: center;
    justify-content: center;
}

.volume-hls .base-volume-hls {
    flex-grow: 1;
    max-width: 100px; /* Ancho máximo para el slider de volumen */
}

.volume-hls #volume-output-hls {
    font-size: 0.85rem;
    color: #ccc;
    margin-left: 0.5rem;
    white-space: nowrap;
    width: 30px; /* Suficiente para "100" y alinearlo */
    text-align: center; /* Centrar el texto dentro del ancho fijo */
}

/* Estilos comunes para ambos sliders */
#seek-hls,
#volume-slider-hls {
    -webkit-appearance: none;
    appearance: none;
    height: 8px; /* Un poco ms grueso para visibilidad */
    border-radius: 4px;
    outline: none;
    cursor: pointer;
    margin: 0 10px; /* Asegura un margen si no está ya en el flexbox */
    background: transparent; /* Importante para que el track se vea */
    position: relative; /* Necesario para ::before */
}

/* Anchos específicos para cada slider */
.progress-hls #seek-hls {
    width: 100%; /* Ocupa todo el espacio disponible */
}
.volume-hls #volume-slider-hls {
    width: 100px; /* Ancho fijo para el volumen en desktop */
}


/* WEBKIT (Chrome, Safari) Track y Thumb */
#seek-hls::-webkit-slider-runnable-track,
#volume-slider-hls::-webkit-slider-runnable-track {
    width: 100%;
    height: 8px; /* Consistente con el slider base */
    background: rgba(199, 199, 199, 0.6); /* Fondo de la pista (parte no rellena) */
    border-radius: 4px;
    cursor: pointer;
    position: relative; /* Para ::before si se usa de esa forma */
}

#seek-hls::-webkit-slider-thumb,
#volume-slider-hls::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    background-color: #d93025; /* Color del "pulgar" */
    border-radius: 50%;
    cursor: pointer;
    margin-top: -4px; /* Centrar el thumb verticalmente */
    position: relative;
    z-index: 1; /* Asegura que el thumb esté por encima del progreso */
}

/* WEBKIT Progress (usando ::before) */
#seek-hls::before,
#volume-slider-hls::before {
    content: '';
    height: 8px; /* Consistente con el slider base */
    background-color: #d93025; /* Color del progreso */
    border-radius: 4px;
    position: absolute;
    top: 0;
    left: 0;
    /* Las variables CSS (--seek-before-width y --volume-before-width) se establecen en JS */
    width: var(--seek-before-width, 0%); /* Para el seek slider */
}
/* Asegurarse que el ::before para el volumen use su variable específica */
.volume-hls #volume-slider-hls::before {
    width: var(--volume-before-width, 100%);
}


/* FIREFOX Track y Thumb */
#seek-hls::-moz-range-track,
#volume-slider-hls::-moz-range-track {
    width: 100%;
    height: 8px; /* Consistente con el slider base */
    background: rgba(199, 199, 199, 0.6); /* Fondo de la pista (parte no rellena) */
    border-radius: 4px;
    cursor: pointer;
}

#seek-hls::-moz-range-progress,
#volume-slider-hls::-moz-range-progress {
    background-color: #d93025; /* Color del progreso en Firefox */
    border-radius: 4px; /* Para que el progreso también tenga bordes redondeados */
    height: 8px; /* Consistente con el slider base */
}

#seek-hls::-moz-range-thumb,
#volume-slider-hls::-moz-range-thumb {
    width: 16px;
    height: 16px;
    background-color: #d93025;
    border-radius: 50%;
    cursor: pointer;
}

/* MICROSOFT EDGE/IE Track y Thumb */
#seek-hls::-ms-track,
#volume-slider-hls::-ms-track {
    width: 100%;
    height: 8px; /* Consistente con el slider base */
    background: transparent; /* Oculta el track base, el fill-lower y fill-upper lo manejan */
    border-color: transparent;
    color: transparent; /* Oculta el track default de IE/Edge */
    cursor: pointer;
}

#seek-hls::-ms-fill-lower,
#volume-slider-hls::-ms-fill-lower {
    background-color: #d93025; /* Color del progreso */
    border-radius: 4px;
}

#seek-hls::-ms-fill-upper,
#volume-slider-hls::-ms-fill-upper {
    background-color: rgba(199, 199, 199, 0.6); /* Color de la parte no rellena */
    border-radius: 4px;
}

#seek-hls::-ms-thumb,
#volume-slider-hls::-ms-thumb {
    width: 16px;
    height: 16px;
    background-color: #d93025;
    border-radius: 50%;
    cursor: pointer;
    margin-top: 0; /* Centrar el thumb */
}

/* Estilos para el hover/active del thumb */
input[type="range"]:active::-webkit-slider-thumb,
input[type="range"]:hover::-webkit-slider-thumb,
input[type="range"]:active::-moz-range-thumb,
input[type="range"]:hover::-moz-range-thumb,
input[type="range"]:active::-ms-thumb,
input[type="range"]:hover::-ms-thumb {
    transform: scale(1.2); /* Efecto de escala en hover/active */
    background-color: #b3261c; /* Rojo más oscuro en hover */
}

/* Media Queries para responsividad del reproductor fijo */
@media (max-width: 767.98px) {
    #base-controls {
        flex-direction: column; /* Apilar elementos en pantallas pequeñas */
        align-items: stretch;
        padding: 0.75rem;
    }
    
    /* Ocultar la información de audio (imagen y título/artista) */
    .info-audio-hls {
        display: none !important; /* Forzar ocultamiento */
    }

    .controls-hls {
        width: 100%;
        margin: 0.5rem 0;
    }
    .progress-hls {
        margin-top: 0.5rem;
    }
    
    /* Ocultar el control de volumen */
    .volume-hls {
        display: none !important; /* Forzar ocultamiento */
    }

    .related-track {
        max-width: 150px; /* Un poco más pequeas en móvil */
        height: auto;
    }
    .related-track img {
        height: 150px;
    }
}

/* En este rango, solo ocultaremos el volumen. La info de audio y los controles principales se mantienen. */
@media (min-width: 768px) and (max-width: 960px) {
    .volume-hls {
        display: none !important; /* Ocultar el control de volumen */
    }
    /* Opcional: ajustar el layout general del reproductor si los elementos restantes se ven apretados */
    #base-controls {
        justify-content: space-between; /* Distribuir espacio entre info y controles */
        flex-wrap: nowrap; /* Asegurarse de que no se envuelvan si hay espacio */
    }
    .info-audio-hls {
        flex-grow: 1; /* Permitir que la info ocupe ms espacio */
    }
    .controls-hls {
        flex-grow: 2; /* Permitir que los controles ocupen más espacio */
        margin-left: 1rem; /* Añadir un poco de margen si es necesario */
        margin-right: 1rem;
    }
    .progress-hls {
        /* No se necesitan cambios aquí, ya que su flex-grow lo maneja dentro de controls-hls */
    }
}