/*
 * Navegación responsive global.
 * Este fichero prevalece deliberadamente sobre
 * el CSS dinámico de session-ui.js.
 */

@media (max-width: 600px) {

    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden !important;
    }

    html body .session-nav-host {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        display: flex !important;
        flex-wrap: wrap !important;
        align-items: stretch !important;

        overflow: visible !important;
    }

    html body .session-nav-host > .session-global-nav,
    html body .session-global-nav {

        display: grid !important;

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            ) !important;

        flex: 1 1 100% !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        gap: 8px !important;

        margin: 8px 0 0 !important;
        padding: 0 !important;

        overflow-x: visible !important;
        overflow-y: visible !important;
    }

    html body .session-global-nav a {

        box-sizing: border-box !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;

        min-height: 44px !important;

        margin: 0 !important;
        padding: 8px 6px !important;

        white-space: normal !important;
        overflow-wrap: anywhere !important;

        text-align: center !important;

        font-size: 14px !important;
    }

    #sessionUserBox {
        max-width:
            calc(100vw - 24px) !important;
    }
}


/* Tablet */
@media (min-width: 601px) and (max-width: 900px) {

    html body .session-global-nav {

        display: flex !important;
        flex-wrap: wrap !important;

        width: 100% !important;
        max-width: 100% !important;

        overflow: visible !important;
    }

    html body .session-global-nav a {

        flex: 0 1 auto !important;

        white-space: normal !important;
    }
}