/* ==========================================================
   ARBIND AI - BARRA MOVIL V6
   ========================================================== */

#arbind-mobile-nav,
#arbind-mobile-more {
    display: none;
}

@media (max-width: 768px) {

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

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

    /* ======================================================
       BARRA PRINCIPAL
       ====================================================== */

    #arbind-mobile-nav {
        position: fixed !important;
        left: 10px !important;
        right: 10px !important;
        bottom: calc(9px + env(safe-area-inset-bottom)) !important;
        z-index: 2147483000 !important;

        display: grid !important;
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        align-items: stretch !important;
        gap: 4px !important;

        padding: 6px !important;

        border: 1px solid rgba(255,255,255,.12) !important;
        border-radius: 20px !important;

        background:
            linear-gradient(
                180deg,
                rgba(8,18,28,.97),
                rgba(4,10,17,.98)
            ) !important;

        box-shadow:
            0 14px 38px rgba(0,0,0,.48),
            inset 0 1px 0 rgba(255,255,255,.04) !important;

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

    #arbind-mobile-nav .arb-mobile-item {
        position: relative !important;

        min-width: 0 !important;
        min-height: 58px !important;

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

        gap: 4px !important;
        padding: 6px 2px !important;

        border: 0 !important;
        border-radius: 15px !important;

        background: transparent !important;

        color: #aab6c6 !important;
        text-decoration: none !important;

        font-family: Inter, system-ui, sans-serif !important;
        font-size: 9.5px !important;
        font-weight: 750 !important;
        line-height: 1 !important;

        cursor: pointer !important;

        overflow: hidden !important;
        white-space: nowrap !important;

        -webkit-tap-highlight-color: transparent !important;
    }

    #arbind-mobile-nav .arb-mobile-item:active {
        transform: scale(.96) !important;
    }

    #arbind-mobile-nav .arb-mobile-icon {
        height: 23px !important;
        min-height: 23px !important;

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

        font-size: 20px !important;
        line-height: 1 !important;
    }

    #arbind-mobile-nav .arb-mobile-label {
        display: block !important;
        max-width: 100% !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    #arbind-mobile-nav .arb-mobile-item.active {
        color: #f4f8fb !important;

        background:
            linear-gradient(
                180deg,
                rgba(24,47,71,.96),
                rgba(13,32,51,.96)
            ) !important;

        box-shadow:
            inset 0 0 0 1px rgba(82,167,255,.16),
            0 5px 18px rgba(0,0,0,.18) !important;
    }

    #arbind-mobile-nav .arb-mobile-item.active .arb-mobile-icon {
        transform: translateY(-1px) !important;
    }

    #arbind-mobile-nav .arb-mobile-item.home-active {
        color: #20ee91 !important;

        background:
            linear-gradient(
                180deg,
                rgba(17,68,57,.92),
                rgba(10,48,41,.95)
            ) !important;

        box-shadow:
            inset 0 0 0 1px rgba(32,238,145,.25) !important;
    }

    #arbind-mobile-nav .arb-mobile-item.more-active::after {
        content: "" !important;

        position: absolute !important;
        top: 8px !important;
        right: 12px !important;

        width: 6px !important;
        height: 6px !important;

        border-radius: 999px !important;
        background: #f2c94c !important;

        box-shadow: 0 0 10px rgba(242,201,76,.7) !important;
    }

    /* ======================================================
       PANEL "MAS"
       ====================================================== */

    #arbind-mobile-more {
        position: fixed !important;
        left: 12px !important;
        right: 12px !important;
        bottom: calc(88px + env(safe-area-inset-bottom)) !important;

        z-index: 2147482999 !important;

        display: none !important;

        padding: 12px !important;

        border: 1px solid rgba(255,255,255,.12) !important;
        border-radius: 22px !important;

        background:
            linear-gradient(
                180deg,
                rgba(10,20,30,.985),
                rgba(4,10,17,.99)
            ) !important;

        box-shadow:
            0 18px 50px rgba(0,0,0,.58),
            inset 0 1px 0 rgba(255,255,255,.04) !important;

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

    #arbind-mobile-more.open {
        display: block !important;
        animation: arbMoreIn .18s ease-out !important;
    }

    @keyframes arbMoreIn {
        from {
            opacity: 0;
            transform: translateY(10px) scale(.985);
        }
        to {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    }

    .arb-more-handle {
        width: 42px !important;
        height: 4px !important;

        margin: 0 auto 10px auto !important;

        border-radius: 999px !important;
        background: rgba(255,255,255,.18) !important;
    }

    .arb-more-head {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;

        margin-bottom: 10px !important;
        padding: 0 3px !important;
    }

    .arb-more-head strong {
        color: #edf3f8 !important;
        font: 800 14px/1.2 Inter, system-ui, sans-serif !important;
    }

    .arb-more-close {
        width: 34px !important;
        height: 34px !important;

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

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

        background: rgba(255,255,255,.05) !important;
        color: #cdd6e0 !important;

        font-size: 18px !important;
        cursor: pointer !important;
    }

    .arb-more-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0,1fr)) !important;
        gap: 8px !important;
    }

    .arb-more-link {
        min-width: 0 !important;
        min-height: 58px !important;

        display: flex !important;
        align-items: center !important;
        gap: 10px !important;

        padding: 9px 11px !important;

        border: 1px solid rgba(255,255,255,.08) !important;
        border-radius: 15px !important;

        background: rgba(255,255,255,.035) !important;
        color: #dbe4ed !important;

        text-decoration: none !important;

        font: 750 12px/1.15 Inter, system-ui, sans-serif !important;

        -webkit-tap-highlight-color: transparent !important;
    }

    .arb-more-link:active {
        transform: scale(.975) !important;
    }

    .arb-more-link .arb-more-icon {
        width: 28px !important;
        height: 28px !important;

        flex: 0 0 28px !important;

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

        border-radius: 9px !important;
        background: rgba(255,255,255,.055) !important;

        font-size: 17px !important;
    }

    .arb-more-link.active {
        border-color: rgba(242,201,76,.32) !important;
        background: rgba(242,201,76,.08) !important;
        color: #f4d65f !important;
    }

    .arb-more-link.premium {
        grid-column: 1 / -1 !important;

        justify-content: center !important;

        border-color: rgba(242,201,76,.32) !important;

        background:
            linear-gradient(
                90deg,
                rgba(242,201,76,.08),
                rgba(242,201,76,.035)
            ) !important;

        color: #f3d360 !important;
    }

    /* Oscurecer suavemente el fondo cuando Más está abierto */
    #arb-mobile-more-backdrop {
        position: fixed !important;
        inset: 0 !important;
        z-index: 2147482998 !important;

        display: none !important;

        background: rgba(0,0,0,.28) !important;
        backdrop-filter: blur(1px) !important;
        -webkit-backdrop-filter: blur(1px) !important;
    }

    #arb-mobile-more-backdrop.open {
        display: block !important;
    }
}

@media (max-width: 390px) {

    #arbind-mobile-nav {
        left: 6px !important;
        right: 6px !important;
        bottom: calc(6px + env(safe-area-inset-bottom)) !important;

        gap: 2px !important;
        padding: 5px !important;
    }

    #arbind-mobile-nav .arb-mobile-item {
        min-height: 55px !important;
        font-size: 8.7px !important;
    }

    #arbind-mobile-nav .arb-mobile-icon {
        font-size: 18px !important;
    }

    #arbind-mobile-more {
        left: 8px !important;
        right: 8px !important;
        bottom: calc(80px + env(safe-area-inset-bottom)) !important;
    }
}