/***********************************************
Pantalla Mobile 16:9
***********************************************/
@media only screen and (max-width: 1024px) {
    body {
        display: flex;
        flex-direction: column;
    }

    h1 {
        font-size: 20px;
    }

    header {
        position: relative;
        height: inherit;
        width: 100%;
        position: static;
        height: 100px;
        padding: 6px;
        padding-top: 39px;
        z-index: 999;
    }

    header nav {
        position: fixed;
        top: 0;
        left: -200px;
        width: 200px !important;
        height: calc(100vh);
        padding-top: 100px;
        padding-inline: 16px;
        padding-bottom: 16px;
        background-color: var(--bg-default);
    }

    header nav.active {
        left: 0;
        z-index: 9;
    }

    header #logo {
        padding: 0;
        height: 53px;
        z-index: 99;
    }

    header #logo .menu {
        position: absolute;
        top: auto;
        bottom: auto;
        left: 0;
    }

    header #logo .menu-open {
        display: block;
        position: absolute;
        top: auto;
        bottom: auto;
        left: 0;
    }

    main {
        padding: 0;
    }

    main #content {
        padding-top: 0;
        row-gap: 16px;
    }

    #main.nosearch #searcher {
        display: none;
    }

    main.playered {
        padding-bottom: 116px;
    }

    .bg-music {
        background: none;
    }

    #content.login-content {
        align-items: flex-start;
    }

    .irradia-form:not(.no-styled) {
        padding-inline: 0 !important;
    }

    .favorites-result-content {
        overflow-x: scroll;
        scrollbar-width: none;
        /* Firefox */
        -ms-overflow-style: none;
        /* IE y Edge */
    }

    .favorites-result-content::-webkit-scrollbar {
        display: none;
    }

    .favorites-results-nav {
        width: fit-content;
    }

    .favorites-results-nav {
        height: 60px;
    }

    /*************************************************************
     *                     ÍTEMS - Irradia Player                *
     * --------------------------------------------------------- *
     * Descripción: Estilos genericos para el player             *
     *************************************************************/
    #irradia-player {
        width: 100%;
        height: auto;
        flex-wrap: wrap;
        padding: 16px;
        gap: 12px;
    }

    #irradia-player #player-theme-info,
    #irradia-player #player-controls,
    #irradia-player #player-menu,
    #irradia-player #player-cover-container {
        display: none;
    }

    #irradia-player #player-play-info {
        width: 100%;
        flex: auto;
    }

    #irradia-player #player-waveform {
        cursor: pointer;
    }

    #irradia-player #player-play-info #player-current-time,
    #irradia-player #player-play-info #player-song-duration {
        width: auto;
        font-size: 12px;
        width: 30px;
    }

    #irradia-player #player-play-info #player-current-time {
        text-align: left;
        display: flex;
        align-items: center;
    }

    #irradia-player #player-play-info #player-song-duration {
        text-align: right;
    }

    #irradia-player #player-mobile {
        display: flex;
        width: 100%;
    }

    #irradia-player #player-mobile .player-title {
        margin-left: 0;
        width: 230px;
    }

    #irradia-player #player-controls-mobile {
        width: 132px;
    }

    #irradia-player .player-theme-info-mobile {
        width: calc(100% - 132px);
    }

    /*****************************************************************
     *                     ÍTEMS - Song List                         *
     * ------------------------------------------------------------- *
     * Descripción: Estilos genericos para las listas de canciones   *        *
     *****************************************************************/
    .song-list-item {
        gap: 8px;
    }

    .song-list-item .song-content {
        gap: 8px;
        padding-right: 41px;
    }

    .song-list-item .song-content .item-info {
        flex: 1;
    }

    .song-list-item .item-options,
    .song-list-item .item-tags,
    .song-list-item .item-waveform,
    .song-list-item .song-duration {
        display: none;
    }

    .song-list-item .item-mobile-menu {
        position: absolute;
        right: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        top: 50%;
        transition: transform 300ms ease;
        /* Mantener centrado y aplicar rotación */
        transform: translateY(-50%) rotate(0deg);
    }

    .song-list-item .item-mobile-menu.rotated {
        transform: translateY(-50%) rotate(180deg);
    }

    .song-list-item .version-container,
    .song-list-item .info-container {
        background-color: unset;
        padding: 0;
    }

    /************************************************************
     *                     ÍTEMS - Buscador                     *
     * -------------------------------------------------------- *
     * Descripción: Estilos genericos para el buscador          *
     ************************************************************/
    #searcher {
        position: static;
        top: none;
        width: 100%;
    }

    #searcher input {
        font-weight: 400;
    }

    #searcher #suggestions {
        white-space: nowrap;
    }

    #searcher #suggestions-label {
        white-space: nowrap;
    }

    /************************************************************
     *                     ÍTEMS - Albumes                      *
     * -------------------------------------------------------- *
     * Descripción: Estilos genericos para álbumes              *
     ************************************************************/
    .album {
        row-gap: 4px;
        width: 160px;
        /* 4px sobreado del cover */
    }

    .album .album-preview:hover .play-overlay {
        display: none;
    }

    .album .album-cover {
        width: 160px;
        height: 160px;
    }

    .album .album-author {
        font-weight: 600;
    }

    .album .album-title {
        width: 142px;
        height: 36px;
        font-size: 14px;
        font-weight: 400;
        line-height: 18px;
    }

    .albums-list-content {
        display: grid;
        grid-template-columns: 160px 160px;
        justify-content: center;
        column-gap: 24px;
        row-gap: 24px;
    }

    /************************************************************
     *                     VISTAS - Home                        *
     * -------------------------------------------------------- *
     * Descripción: Estilos principales de la vista Home        *
     ************************************************************/

    .home h1 {
        font-size: 20px;
    }

    .home .home-slider-controls {
        display: none;
    }

    .home .home-slider .slider-nav {
        height: 26px;
    }

    .home .home-slider .slider__slide {
        width: 150px;
    }

    .home .home-slider .slider-content {
        gap: 16px;
    }

    .home .home-featured {
        padding-top: 16px;
    }

    .home .home-slider .album .album-cover {
        width: 150px;
        height: 150px;
    }

    .home .home-featured .song-list-nav {
        flex-direction: column;
        align-items: flex-start;
        height: auto;
        gap: 8px;
    }

    .home .home-featured .song-list-nav h1 {
        font-size: 20px;
        font-weight: 600;
        height: 26px;
    }

    .home .home-featured .song-list-nav form {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        gap: 16px;
        padding: 0 !important;
    }

    /************************************************************
     *                     VISTAS - Detalle Álbum               *
     * -------------------------------------------------------- *
     * Descripción: Estilos principales de la vista Home        *
     ************************************************************/

    .album-detail .album-title {
        flex-direction: column;
        row-gap: 16px;
    }

    .album-detail .album-title h1.title-mobile {
        display: block;
    }

    .album-detail .album-title h1:not(.title-mobile) {
        display: none;
    }

    .album-detail .album-title .album-cover {
        width: 100%;
        height: auto;
    }

    /************************************************************
     *                     VISTAS - History                     *
     * -------------------------------------------------------- *
     * Descripción: Estilos principales de la vista Home        *
     ************************************************************/

    .history-info {
        display: none;
    }

    /************************************************************
     *                     VISTAS - Modal                     *
     * -------------------------------------------------------- *
     * Descripción: Estilos principales de la vista Home        *
     ************************************************************/

    .modal-window {
        max-width: inherit;
        margin: 0;
        width: 90%;
    }

    .project-add-item {
        width: 100%;
    }

    .project-info {
        font-size: 12px;
    }

}