/* =========================================================
   DNS CONTROL - NAVEGACAO GLOBAL DAS TELAS INTERNAS
   ========================================================= */

body.dns-inner-page{
    padding-bottom:calc(105px + env(safe-area-inset-bottom)) !important;
}


/* CABECALHO */
.dns-inner-topbar{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;

    margin:0 0 27px;
}

.dns-inner-left{
    min-width:0;

    display:flex;
    align-items:center;
    gap:12px;
}

.dns-inner-menu{
    width:48px;
    height:48px;

    flex:0 0 48px;

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

    border:1px solid #2b3c49;
    border-radius:13px;

    background:#101a23;

    color:#eef5f8;

    font-size:25px;
    line-height:1;

    box-shadow:none;
}

.dns-inner-brand{
    min-width:0;
}

.dns-inner-brand strong{
    display:block;

    color:#f5f8fa;

    font-size:17px;
    line-height:1.05;
    font-weight:850;

    letter-spacing:-.5px;
}

.dns-inner-brand strong span{
    color:#72ddff;
}

.dns-inner-brand small{
    display:block;

    margin-top:5px;

    color:#6c8294;

    font-size:7px;
    font-weight:700;
    letter-spacing:1.4px;

    white-space:nowrap;
}

.dns-inner-online{
    display:flex;
    align-items:center;
    gap:7px;

    flex:0 0 auto;

    color:#55e0a8;

    font-size:8px;
    font-weight:850;
}

.dns-inner-online::before{
    content:"";

    width:8px;
    height:8px;

    border-radius:50%;

    background:#4ce0a5;

    box-shadow:
        0 0 0 3px rgba(76,224,165,.08),
        0 0 12px rgba(76,224,165,.75);

    animation:dnsInnerPulse 1.6s infinite;
}

@keyframes dnsInnerPulse{
    0%,100%{
        box-shadow:
            0 0 0 3px rgba(76,224,165,.10),
            0 0 8px rgba(76,224,165,.45);
    }

    50%{
        box-shadow:
            0 0 0 8px rgba(76,224,165,0),
            0 0 16px rgba(76,224,165,.9);
    }
}


/* ESCONDE VOLTAR ANTIGO */
body.dns-inner-page .dns-original-back{
    display:none !important;
}


/* OVERLAY */
.dns-inner-overlay{
    position:fixed;
    inset:0;

    z-index:9997;

    background:rgba(0,5,10,.70);
    backdrop-filter:blur(3px);

    opacity:0;
    pointer-events:none;

    transition:opacity .22s ease;
}

.dns-inner-overlay.open{
    opacity:1;
    pointer-events:auto;
}


/* SIDEBAR */
.dns-inner-sidebar{
    position:fixed;

    top:0;
    left:0;
    bottom:0;

    z-index:9998;

    width:min(82vw,340px);

    display:flex;
    flex-direction:column;

    padding:22px 17px 24px;

    background:#0d1620;

    border-right:1px solid #293a47;

    transform:translateX(-105%);

    transition:transform .25s ease;

    box-shadow:20px 0 55px rgba(0,0,0,.40);
}

.dns-inner-sidebar.open{
    transform:translateX(0);
}

.dns-inner-sidebar-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;

    padding-bottom:20px;

    border-bottom:1px solid #233541;
}

.dns-inner-sidebar-logo strong{
    display:block;

    color:#f4f7fa;

    font-size:20px;
    font-weight:850;
}

.dns-inner-sidebar-logo strong span{
    color:#72ddff;
}

.dns-inner-sidebar-logo small{
    display:block;

    margin-top:3px;

    color:#687f91;

    font-size:8px;
    letter-spacing:1.5px;
}

.dns-inner-close{
    width:42px;
    height:42px;

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

    border:1px solid #2b3c49;
    border-radius:11px;

    background:#111b25;

    color:#e9f0f4;

    font-size:20px;
}

.dns-inner-menu-label{
    margin:25px 10px 9px;

    color:#60778a;

    font-size:8px;
    font-weight:850;

    letter-spacing:1.8px;
}

.dns-inner-link{
    min-height:51px;

    display:flex;
    align-items:center;
    gap:12px;

    margin:3px 0;
    padding:0 14px;

    border:1px solid transparent;
    border-radius:11px;

    color:#abbac6;

    text-decoration:none;

    font-size:12px;
    font-weight:700;
}

.dns-inner-link.active{
    color:#77ddff;

    border-color:rgba(0,191,255,.30);

    background:
        linear-gradient(
            100deg,
            rgba(17,150,255,.20),
            rgba(15,204,239,.08)
        );
}

.dns-inner-icon{
    width:24px;

    text-align:center;

    font-size:17px;
}

.dns-inner-footer{
    margin-top:auto;

    padding:16px 13px;

    border:1px solid #233642;
    border-radius:12px;

    background:#0a141c;
}

.dns-inner-footer small{
    display:block;

    color:#657c8f;

    font-size:8px;

    letter-spacing:1.3px;
}

.dns-inner-footer strong{
    display:flex;
    align-items:center;
    gap:8px;

    margin-top:6px;

    color:#edf5f1;

    font-size:12px;
}

.dns-inner-protected{
    width:9px;
    height:9px;

    flex:0 0 9px;

    border-radius:50%;

    background:#4ce0a5;

    box-shadow:0 0 12px rgba(76,224,165,.75);

    animation:dnsInnerPulse 1.6s infinite;
}


/* BARRA INFERIOR */
.dns-inner-bottom{
    position:fixed;

    left:0;
    right:0;
    bottom:0;

    z-index:9990;

    height:72px;

    display:grid;
    grid-template-columns:repeat(4,1fr);

    padding-bottom:env(safe-area-inset-bottom);

    border-top:1px solid #273744;

    background:rgba(10,18,27,.97);

    backdrop-filter:blur(15px);
}

.dns-inner-bottom a{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:4px;

    color:#7f91a3;

    text-decoration:none;

    font-size:8px;
    font-weight:700;
}

.dns-inner-bottom .dns-bottom-icon{
    font-size:19px;
}

.dns-inner-bottom a.active{
    color:#73ddff;
}

.dns-inner-bottom a.active .dns-bottom-icon{
    text-shadow:0 0 13px rgba(80,215,255,.55);
}


/* MOBILE */
@media(max-width:600px){

    .dns-inner-topbar{
        margin-bottom:25px;
    }

    .dns-inner-brand small{
        font-size:6.8px;
    }

}


/* DESKTOP */
@media(min-width:850px){

    .dns-inner-bottom{
        display:none;
    }

    body.dns-inner-page{
        padding-bottom:55px !important;
    }

}