/* ==========================================================
   MASCARADASTV 026
   NAVEGACION PRINCIPAL PEGADA ABAJO
   ========================================================== */

@media(max-width:980px){

    /*
     * QUITAR COMPLETAMENTE EL LAUNCHER SUPERIOR.
     *
     * No queda:
     * - MascaradasTV
     * - Deslizar
     * - iconos repetidos
     * - espacio vacío
     */
    #screen-home .mtv-home-launcher{
        display:none !important;
    }


    /*
     * Como HOME022 convirtió este panel
     * únicamente en contenedor del launcher,
     * lo quitamos completo para no dejar
     * una caja vacía arriba del mapa.
     */
    #screen-home .home-intro-panel{
        display:none !important;
    }


    /*
     * BARRA INFERIOR
     *
     * SIEMPRE FIJA.
     * PEGADA A LOS TRES BORDES:
     *
     * izquierda 0
     * derecha   0
     * abajo     0
     */
    .bottom-nav{

        position:fixed !important;

        left:0 !important;
        right:0 !important;
        bottom:0 !important;

        top:auto !important;

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

        margin:0 !important;

        box-sizing:border-box !important;

        z-index:90 !important;


        /*
         * Mantener estética oscura actual,
         * pero deja de parecer una tarjeta flotante.
         */
        border-radius:0 !important;

        border-left:0 !important;
        border-right:0 !important;
        border-bottom:0 !important;

        border-top:
          1px solid
          rgba(255,255,255,.10) !important;


        /*
         * Fondo fijo.
         */
        background:
          rgba(12,12,13,.97) !important;

        backdrop-filter:
          blur(18px) !important;

        -webkit-backdrop-filter:
          blur(18px) !important;


        /*
         * Quitamos efecto de barra flotante.
         */
        box-shadow:
          0 -5px 22px
          rgba(0,0,0,.28) !important;


        /*
         * AHORA ES UNA FILA HORIZONTAL REAL.
         */
        display:flex !important;

        flex-direction:row !important;
        flex-wrap:nowrap !important;

        justify-content:flex-start !important;

        align-items:stretch !important;

        gap:2px !important;


        /*
         * DESLIZAMIENTO.
         */
        overflow-x:auto !important;
        overflow-y:hidden !important;

        -webkit-overflow-scrolling:
          touch !important;

        overscroll-behavior-x:
          contain !important;

        scroll-snap-type:
          x proximity !important;

        scroll-behavior:
          smooth !important;

        touch-action:
          pan-x !important;


        /*
         * Pegada abajo incluso en iPhone,
         * agregando únicamente el safe-area
         * dentro de la propia barra.
         */
        padding:
          4px
          4px
          calc(4px + env(safe-area-inset-bottom))
          4px !important;


        min-height:
          calc(64px + env(safe-area-inset-bottom)) !important;

        height:auto !important;


        scrollbar-width:
          none !important;
    }


    .bottom-nav::-webkit-scrollbar{
        display:none !important;
    }


    /*
     * Cada botón mantiene el estilo
     * que ya tiene la barra actual.
     *
     * El ancho fijo hace que existan
     * más elementos de los que caben
     * y por eso la barra se desliza.
     */
    .bottom-nav > button{

        flex:
          0 0 72px !important;

        width:
          72px !important;

        min-width:
          72px !important;

        max-width:
          72px !important;


        height:
          58px !important;

        min-height:
          58px !important;


        margin:0 !important;

        padding:
          6px 4px !important;


        border-radius:
          12px !important;


        scroll-snap-align:
          start !important;

        touch-action:
          pan-x !important;


        display:grid !important;

        place-items:center !important;

        align-content:center !important;

        gap:
          3px !important;
    }


    /*
     * Texto inferior.
     */
    .bottom-nav > button span{

        display:block !important;

        width:100% !important;

        font-size:
          9px !important;

        line-height:
          10px !important;

        text-align:center !important;

        white-space:nowrap !important;

        overflow:hidden !important;

        text-overflow:ellipsis !important;
    }


    /*
     * Los dos botones nuevos reciben
     * exactamente la misma estructura.
     */
    .bottom-nav
    .bottom-nav-extra-026{

        font:inherit;
    }


    /*
     * El contenido nunca queda escondido
     * detrás de la barra fija.
     */
    .screen{

        padding-bottom:
          calc(
            78px +
            env(safe-area-inset-bottom)
          ) !important;
    }


    /*
     * HOME ya no necesita espacio
     * del launcher viejo.
     */
    #screen-home .home-scroll{

        padding-top:
          0 !important;

        margin-top:
          0 !important;
    }

}


@media(max-width:390px){

    .bottom-nav > button{

        flex-basis:
          68px !important;

        width:
          68px !important;

        min-width:
          68px !important;

        max-width:
          68px !important;
    }

}