*{
    margin: 0;
    border: 0;
    padding: 0;
}

:root{
    --ancho-barras-defecto: 300px;

    --ancho-barra-menu: var(--ancho-barras-defecto);
    --ancho-barra-derecha: var(--ancho-barras-defecto);

    --separacion-grid: 10px;

    --borde-radio-articulos: 10px;

    --color-fondo: #000000;
    --color-fondo-articulos-barras: #121212;
    --color-letra-barras: #b3b3b3;   
    
    --color-seleccion-articulo-barra: #fff;

    --alto-barra-progreso: 5px;
    --radio-barra-progreso: calc(var(--alto-barra-progreso)/2);

    --color-barra-base: hsla(0,0%,100%,.3);

    --color-seleccion: #232323;
    --color-hover-seleccion: #474545;

    --color-like-canciones: #00913f;

    --color-cancion-seleccionada: #cdcdcd;

    --tamanho-padding: 10px;

    --ancho-imagen-album: 110px;
}

body{
    display: grid;
    background-color: var(--color-fondo);
    gap: var(--separacion-grid);
    user-select: none;
}

.cancion.seleccionado{
    background-color: var(--color-cancion-seleccionada);
}

.cancion.sonando .titulo{
    color: var(--color-like-canciones);
}

.lista-horizontal{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 10px;
    overflow: auto;
}

.recomendaciones, .albumes{
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
}

.album{
    background: var(--color-barra-base);
    border-radius: 10px;
    width: 150px;
    min-width: 150px;
    display: grid;
    grid-template-rows: 150px auto;
    align-items: center;
    gap: 10px;
    padding: 10px;
    text-align: center;
    text-decoration: none;
    color: var(--color-letra-barras);
    height: calc(269px - 10px*2);
    overflow-y: auto;
    overflow-x: hidden;
}

.album .titulo{
    overflow: hidden;
    max-height: 100%;
}

.album:hover{
    color: var(--color-seleccion-articulo-barra);
}

.album .img{
    border-radius: 10px;
    height: 150px;
    width: 150px;
    object-fit: cover;
    transition: all 1.5s;
}

.album:hover .img{
    scale: 1.1;
}

.boton.like.true .no_like{
    display: none;
}

.boton.like:not(.true) .like{
    display: none;
}

.apartado-barra{
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    text-decoration: none;
    color: var(--color-letra-barras);
}

.foto-perfil{
    width: 30px;
    border-radius: 100%;
    border: 1px solid var(--color-fondo);
}

.seccion-biblioteca-usuario{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    text-decoration: none;
    color: var(--color-letra-barras);
    background: transparent;
    border-radius: 10px;
    padding: 10px;
    gap: 10px;
}

.seccion-biblioteca-usuario:hover{
    background-color: var(--color-hover-seleccion);
}

.seccion-biblioteca-usuario .img{
    object-fit: cover;
    height: 48px;
    width: 48px;
    border-radius: 10px;
}

main{
    color: var(--color-seleccion-articulo-barra);
    overflow: hidden;
    background-color: var(--color-fondo-articulos-barras);
    border-radius: var(--borde-radio-articulos);
    position: relative;
    
    grid-area: main;
    display: grid;
    gap: 10px;
}

main .zona_seccion{
    overflow: overlay;
    transition: all 2s;
    box-sizing: border-box;
}

main:not(:hover) .zona_seccion::-webkit-scrollbar-thumb{
    display: none;
}

.zona_seccion::-webkit-scrollbar{
    width: 8px;
    background-color: transparent;
    border-radius: 10px;
    transition: all 2s;
}

.zona_seccion::-webkit-scrollbar-thumb{
    background-color: green;
    border-radius: 10px;
    transition: all 2s;
}

.cancion.sonando .posicion .play, .play_pause.reproduciendo .play{
    display: none;
}

.cancion:not(.sonando) .posicion .pause, .play_pause:not(.reproduciendo) .pause{
    display: none;
}

footer.info{
    border-top: 1px solid;
    bottom: 0;
    position: relative;
    width: calc(100% - 15px*2);
    left: 0;
    padding: 15px;

    display: flex;
    justify-content: space-between;
}

.redes-sociales a{
    margin-left: 10px;
}

.mensajes_por_pantalla{
    position: absolute;
    border-radius: 10px;
    z-index: 100;
}

.mensajes_por_pantalla .mensaje{
    padding: 10px;
    margin: 10px;
    background-color: var(--color-like-canciones);
    border-radius: 10px;
}

@media all and (min-width: 770px){ /* Diseño Ordenador y Tablet */
    body{
        grid-template-rows: auto 100px;
        padding: var(--tamanho-padding);
        height: calc(var(--alto-ventana) - var(--tamanho-padding)*2);
    }

    .movil{
        display: none;
    }

    body.con_barra_derecha{
        grid-template-areas: "barra-menu main barra-derecha"
                            "info-musica info-musica info-musica";
        grid-template-columns: var(--ancho-barra-menu) auto var(--ancho-barra-derecha);
    }
    
    body.sin_barra_derecha{
        grid-template-areas: "barra-menu main"
        "info-musica info-musica";
        grid-template-columns: var(--ancho-barra-menu) auto;
    }

    .icono-svg{
        margin-right: 20px;
    }

    .libreria-barra, .opciones-libreria{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        flex-wrap: nowrap;
    }

    .opciones-libreria .boton{
        margin: 5px;
    }

    .contenido-barra{
        flex-direction: column;
    }

    .apartado-barra{
        flex-direction: row;
    }

    .seccion-barra{
        position: relative;
        display: grid;
        gap: var(--separacion-grid);
    }

    .barra-musica{
        grid-template-columns: repeat(3, calc(100%/3));
        grid-template-areas: "detalles-cancion botones-musica opciones-cancion";
    }

    .cabeza-lista, .cancion{
        grid-template-columns: 10px minmax(120px, auto) 25% 20px 15% 10%;
        grid-template-areas: "posicion titulo reproduciones like tiempo opciones";
    }

    .cancion .reproduciones{
        display: flex;
    }

    .desplegable_opciones_usuario{
        right: 0;
    }
}

.padding-cabecera_main{
    padding-top: 50px;
}

.cabecera-main{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
    width: calc(100% - 10px*2);
    top: 0;
    height: 50px;
    position: absolute;
    margin: 0 10px;
    z-index: 10;
}

@media all and (max-width: 770px){ /* Diseño móvil */
    body{
        grid-template-rows: auto 90px;
        grid-template-areas: "main"
                            "barra-menu";
        height: var(--alto-ventana);
    }

    main:not(:has(.cabecera)) .cabecera-main .botones-cabecera-main{
        display: none;
    }

    main{
        grid-template-rows: 100%;
    }

    .zona_seccion{
        padding-bottom: 75px;
    }

    .barra-derecha, .barra-menu .libreria, .ajustar-ancho, .pc, .tablet {
        display: none;
    }

    .apartado-barra .icono-svg{
        width: 30px;
    }

    .barra-musica{
        position: absolute;
        width: calc(100% - var(--tamanho-padding)*4);
        overflow: hidden;
        height: 60px;
        bottom: 96px;
        grid-template-areas: "detalles-cancion opciones-cancion botones-musica";
        grid-template-columns: 80% 10% 10%;
        margin: var(--tamanho-padding);
        background-color: #756c00;
        border-radius: 10px;
    }

    .apartado-barra{
        flex-direction: column;
    }

    .contenido-barra{
        flex-direction: row;
        position: absolute;
        
        width: calc(100% - var(--tamanho-padding)*2);
        align-items: center;
    }

    .progreso-cancion{
        position: absolute;
        bottom: 0;
        left: 0;
    }

    .clasificar_sonidos{
        display: flex;
        flex-direction: row;
    }
    
    .opcion_sonido{
        background-color: var(--color-hover-seleccion);
        color: var(--color-cancion-seleccionada);
        padding: 10px;
        margin: 5px;
        border-radius: 15px;
        cursor: pointer;
    }

    .opcion_sonido.seleccionado{
        background-color: var(--color-like-canciones);
        color: var(--color-fondo);
    }

    main:has(.cabecera) .perfil{
        display: none;
    }

    main:has(.sin_clasificar) .clasificar_sonidos{
        display: none;
    }

    .cabeza-lista, .cancion{
        grid-template-columns: 10px minmax(120px, auto) 20px 15% 10%;
        grid-template-areas: "posicion titulo like tiempo opciones";
    }

    .desplegable_opciones_usuario{
        left: 0;
    }
}

.detalles-cancion{
    grid-area: detalles-cancion;
}

.opciones{
    grid-area: opciones-cancion;
}

.seccion-barra{
    color: var(--color-letra-barras);
}

.icono-svg{
    width: 30px;
    fill: var(--color-letra-barras);
}

.contenido-barra{
    display: flex;
    justify-content: space-evenly;
    border-radius: var(--borde-radio-articulos);
    padding: var(--tamanho-padding);
    background-color: var(--color-fondo-articulos-barras);
    /*box-shadow: 4px 3px 15px 9px rgba(197, 8, 8, 0.15);*/ /* Fututo */
}

.mostrar-determinados-articulos{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    gap: 5px;
}

.mostrar-determinados-articulos .boton{
    background-color: var(--color-seleccion);
    padding: 8px;
    border-radius: 8px;
    color: var(--color-seleccion-articulo-barra);
    transition: background-color 0.5s ease;
}

.mostrar-determinados-articulos .boton:hover{
    background-color: var(--color-hover-seleccion);
}


.buscador-ordenar, .buscador-biblioteca{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.buscador-biblioteca-input{
    width: 80px;
}

.ordenar-biblioteca .boton{
    color: var(--color-letra-barras);
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
}

.ajustar-ancho{
    cursor: ew-resize;
    position: absolute;
    height: 100%;
    width: var(--separacion-grid);
}

.barra-menu .ajustar-ancho{
    right: 0;
}

.barra-menu .ajustar-ancho:hover{
    border-right: 1px solid var(--color-letra-barras);
}

.barra-derecha .ajustar-ancho{
    left: 0;
}

.barra-derecha .ajustar-ancho:hover{
    border-left: 1px solid var(--color-letra-barras);
}

.apartado-barra:hover{
    color: var(--color-seleccion-articulo-barra);
}

.apartado-barra:hover .icono-svg{
    fill: var(--color-seleccion-articulo-barra);
}

.jugar-musica{
    grid-area: botones-musica;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.barra-musica{
    grid-area: info-musica;
    display: grid;
    align-items: center;
    justify-content: space-between;
    padding: var(--tamanho-padding);
}

.titulo-cancion{
    color: var(--color-seleccion-articulo-barra);
}

.artistas-cancion{
    color: var(--color-letra-barras);
}

.artistas-cancion a{
    color: var(--color-letra-barras);
    text-decoration: none;
}

.artista-cancion:hover{
    color: var(--color-seleccion-articulo-barra);
    text-decoration: underline;
}

.detalles-cancion, .opciones{
    display: flex;
    align-items: center;
    flex-direction: row;
    flex-wrap: nowrap;
}

.detalles-cancion{
    justify-content: flex-start;
}

.opciones{
    justify-content: flex-end;
}

.imagen-cancion{
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 10px;
    margin-right: 20px;
}

.barra-menu{
    grid-area: barra-menu;
    grid-template-rows: 120px auto;
}

.barra-derecha{
    grid-area: barra-derecha;
    background-color: var(--color-fondo-articulos-barras);
    border-radius: var(--borde-radio-articulos);
}

.botones-svg{
    width: 20px;
    fill: var(--color-letra-barras);
}

.boton{
    background: transparent;
    cursor: pointer;
}

.boton:hover .botones-svg{
    fill: var(--color-seleccion-articulo-barra);
}

.barra-progreso{
    width: 100%;
    background-color: var(--color-barra-base);
    border-radius: var(--radio-barra-progreso);
    height: var(--alto-barra-progreso);
    cursor: pointer;
}

.barra-tiempo, .volumen-actual{
    background-color: var(--color-seleccion-articulo-barra);
    border-radius: var(--radio-barra-progreso);
    height: var(--alto-barra-progreso);
    position: relative;
}

.barra-tiempo{
    width: var(--progreso-barra-transformar);
}

.volumen-actual{
    width: 50%;
}

.barra-tiempo::before, .volumen-actual::before{ 
    --diferencia: 5px;
    --ancho-alto: calc(var(--alto-barra-progreso) + var(--diferencia));
    content: "";
    position: absolute;
    opacity: 0;
    height: var(--ancho-alto);
    width: var(--ancho-alto);
    border-radius: 100%;
    background: inherit;
    transition: opacity 0.2s ease;
    transform: translateY(-2.5px);
    right: calc(-1 * var(--diferencia));
}

.barra-progreso:hover .barra-tiempo::before, .barra-volumen:hover .volumen-actual::before{
    opacity: 1;
}

.progreso-cancion{
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    width: 100%;
}

.tiempo{
    color: var(--color-seleccion-articulo-barra);
    margin: 10px;
}

.botones{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    width: 100%;
    justify-content: space-evenly;
}

.barra-volumen{
    width: 80px;
    background-color: var(--color-barra-base);
    border-radius: var(--radio-barra-progreso);
    height: var(--alto-barra-progreso);
    position: relative;
}

.cerrar-ventana{
    position: absolute;
    right: 0;
    width: 40px;
    height: 40px;
    border-radius: 100%;
    color: var(--color-seleccion-articulo-barra);
}

.ocultar{
    display: none;
}

.cabeza-lista{
    border-bottom: 1px solid var(--color-hover-seleccion);
    padding-bottom: 10px;
    margin-bottom: 10px;
}

.cabeza-lista, .cancion{
    display: grid;
    align-items: center;
    gap: 10px;
}

.cancion{
    padding: 10px 0;
    background: transparent;
    color: var(--color-letra-barras);
    border-radius: 5px;
}

.like.boton.true .like{
    fill:var(--color-like-canciones);
}

.like.boton .no_like:hover{
    fill: var(--color-like-canciones);
}

.cancion:hover{
    background-color: var(--color-hover-seleccion);
}

.cancion:not(:hover) .posicion .boton, .cancion:not(:hover) .like.boton:not(.true){
    display: none;
}

.cancion:hover .num-posicion{
    display: none;
}

.cancion .posicion{
    grid-area: posicion;
    text-align: center;
    justify-content: center;
}

.cancion .titulo{
    grid-area: titulo;
    flex-direction: column;
}

.cancion .reproduciones{
    grid-area: reproduciones;
}

.cancion .like{
    grid-area: like;
}

.cancion .tiempo-cancion{
    grid-area: tiempo;
}

.cancion .tiempo-cancion, .cancion .titulo{
    text-align: start;
}

.cancion .posicion, .cancion .titulo, .cancion .like, .cancion .tiempo-cancion{
    display: flex;
}

.cancion .lista-canciones{
    display: flex;
    flex-direction: column;
}

.cancion .lista-canciones .cancion > span{
    overflow: hidden;
}

/* */

.desplegable_opciones_usuario{
    position: absolute;
    padding: 5px;
    background-color:#282828;
    border-radius: 10px;
}

.texto_opcion_usuario{
    padding: 13px;
    border-radius: 10px;
    display: block;
    text-decoration: none;
    color: var(--color-letra-barras);
}

.texto_opcion_usuario:hover{
    background-color: var(--color-hover-seleccion);
}

#frequencyCanvas{
    width: 100%;
    height: 150px;
}