/* layout principal de la página usando grid */
body {
    display: grid;

    /* una sola columna */
    grid-template-columns: 1fr;

    /* filas para header, contenido y barra del player */
    grid-template-rows: 70px 1fr 80px;

    /* áreas del grid */
    grid-template-areas:
        "header"
        "main"
        "footer";

    /* asegura que la página ocupe toda la pantalla */
    min-height: 100vh;
}

/* asignación de áreas del grid */
.header  { grid-area: header; }
main     { grid-area: main; }
footer   { grid-area: footer; }


/* header fijo al hacer scroll */
.header {
    position: sticky;

    top: 0;

    /* prioridad para que quede encima */
    z-index: 100;
}


/* contenedor principal del reproductor */
.player {
    display: flex;

    flex-direction: row;

    align-items: center;

    justify-content: space-between;

    gap: 3rem;

    padding: 2rem 3rem;

    height: 100%;
}

/* sección izquierda del reproductor */
.player-left {
    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 1.2rem;

    flex: 1;
}

/* panel lateral del reproductor */
.player-aside {
    align-self: flex-start;

    width: 300px;

    flex-shrink: 0;
    
}

/* barra inferior del reproductor */
.player-bar {
    position: fixed;

    bottom: 0;
    left: 0;

    width: 100%;

    z-index: 100;

    display: flex;

    flex-direction: row;

    align-items: center;

    justify-content: space-between;

    padding: 0 2rem;

    height: 80px;

    /* fondo con transparencia */
    background: rgba(30, 41, 59, 0.85);

    /* efecto blur del fondo */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    border-top: 1px solid #334155;
}

/* parte central del reproductor */
.player-bar-center {
    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 0.3rem;

    flex: 1;

    max-width: 600px;
}


/* pantallas grandes */
@media (min-width: 1280px) {

    .player {
        padding: 2rem 5rem;

        gap: 4rem;
    }

    .player-content {
        width: 400px;
    }

    /* álbum más grande */
    .player-album {
        height: 360px;
    }

    .player-aside {
        width: 340px;
        
    }
}


/* pantallas tipo laptop */
@media (min-width: 1024px) and (max-width: 1279px) {

    .player {
        padding: 2rem 3rem;

        gap: 3rem;
    }

    .player-content {
        width: 360px;
    }

    .player-album {
        height: 320px;
    }

    .player-aside {
        width: 300px;
    }
}


/* tablets */
@media (min-width: 768px) and (max-width: 1023px) {

    .player {
        padding: 1.5rem 2rem;

        gap: 2rem;
    }

    .player-content {
        width: 300px;

        padding: 20px 20px 60px 20px;
    }

    .player-album {
        height: 260px;
    }

    .player-aside {
        width: 240px;
    }

    /* imágenes del aside más pequeñas */
    .aside-text-img {
        width: 40px;

        height: 40px;
    }

    .player-bar {
        padding: 0 1.5rem;
    }

    .player-bar-left {
        min-width: 180px;
    }
}


/* versión móvil */
@media (max-width: 767px) {
    
    /* aplica box sizing global */
    *{
        box-sizing: border-box;
    }

    body {

        /* barra del player más alta */
        grid-template-rows: 60px 1fr 130px; 
    }

    img{

        /* evita que las imágenes rompan el layout */
        max-width: 100%;

        height: auto;

        display: none;
    }

    
    /* header más compacto */
    .header {
        padding: 0.8rem 1rem;
    }

    .player-img-logo {
        width: 28px;        
    }

    /* input del header */
    .header-input {
        display: flex;

        max-width: 6.2rem;   

        width: 100%;       

        padding: 0.4rem 0.6rem;

        font-size: 0.75rem;
    }

    .header-nav {
        gap: 1rem;
    }

    .header-nav a {
        font-size: 0.8rem;
    }

    
    /* layout del player en móvil */
    .player {
        flex-direction: column;

        align-items: center;

        justify-content: center;

        padding: 1rem;

        gap: 1rem;
    }

    /* ocultar algunos links del header */
    .header-nav a[href="#"]:nth-child(n+2) {
        display: none;      
    }

    .player-left {
        width: 100%;

        align-items: center;
    }

    .player-content {
        width: calc(100% - 2rem);

        max-width: 320px;

        margin: 0 auto;

        padding: 16px 16px 50px 16px;
    }

    .player-album {
        height: 220px;
    }

    /* ocultar aside en móvil */
    .player-aside {
        display: none;
    }

    
    .player-aside {
        width: 100%;

        max-width: 400px;

        align-self: center;

        display: none;
    }

    
    /* barra del reproductor móvil */
    .player-bar {
        height: 130px;

        flex-direction: column;

        justify-content: center;

        gap: 0.4rem;

        padding: 0.6rem 1rem;
    }

    .player-bar-left {
        min-width: unset;

        width: 100%;

        justify-content: center;
    }

    .player-bar-center {
        width: 100%;

        max-width: 100%;
    }

    .player-bar-right {
        min-width: unset;

        justify-content: center;
    }

    .player-bar-img {
        width: 32px;

        height: 32px;
    }

    .player-bar-text {
        font-size: 0.78rem;
    }

    .player-bar-subtext {
        font-size: 0.65rem;
    }

    .player-bar-btn {
        font-size: 0.9rem;
    }

    .player-bar-btn-play {
        width: 32px;

        height: 32px;
    }

    .player-volume-track {
        width: 60px;
    }
    
    /* ocultar enlaces en móvil */
    a{
        display: none;
    }
    
}