/* ==========================================================
   CERCA NAV V3
   Barra inferior premium
   ========================================================== */

.bottom-nav.cerca-bottom-nav {
    position: fixed !important;

    left: 50% !important;
    right: auto !important;

    top: auto !important;
    bottom: 0 !important;

    transform: translateX(-50%) !important;

    width: min(100%, 760px) !important;
    height: calc(72px + env(safe-area-inset-bottom)) !important;

    margin: 0 !important;

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

    display: grid !important;

    grid-template-columns:
        1fr
        1fr
        82px
        1fr
        1fr !important;

    align-items: center !important;

    background:
        linear-gradient(
            180deg,
            rgba(10, 20, 36, .97),
            rgba(4, 11, 22, .99)
        ) !important;

    border-top:
        1px solid
        rgba(56, 189, 248, .13) !important;

    border-left:
        1px solid
        rgba(148, 163, 184, .06) !important;

    border-right:
        1px solid
        rgba(148, 163, 184, .06) !important;

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

    box-shadow:
        0 -14px 40px rgba(0,0,0,.30),
        0 -1px 0 rgba(255,255,255,.02) !important;

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

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

    z-index: 9998 !important;

    box-sizing: border-box !important;
}


/* ==========================================================
   ITEMS NORMALES
   ========================================================== */

.cerca-bottom-nav .nav-item {
    position: relative !important;

    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;

    transform: none !important;

    min-width: 0 !important;
    width: 100% !important;
    height: 55px !important;

    margin: 0 !important;
    padding: 5px 2px !important;

    border: 0 !important;

    border-radius: 13px !important;

    display: flex !important;
    flex-direction: column !important;

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

    gap: 3px !important;

    background:
        transparent !important;

    color:
        #64748b !important;

    box-shadow:
        none !important;

    cursor: pointer !important;
}


/* ICONO */

.cerca-bottom-nav
.nav-item
.material-icons-round {
    font-size: 22px !important;
    line-height: 1 !important;

    color:
        #64748b !important;

    transition:
        color .18s ease,
        transform .18s ease !important;
}


/* TEXTO */

.cerca-bottom-nav
.nav-item > span:last-child {
    font-size: 10px !important;
    line-height: 1 !important;

    font-weight: 750 !important;

    white-space: nowrap !important;

    color:
        #64748b !important;
}


/* ACTIVO */

.cerca-bottom-nav
.nav-item.active {
    color:
        #38bdf8 !important;

    background:
        linear-gradient(
            180deg,
            rgba(14,165,233,.09),
            rgba(14,165,233,.025)
        ) !important;
}


.cerca-bottom-nav
.nav-item.active
.material-icons-round {
    color:
        #38bdf8 !important;

    transform:
        translateY(-1px) !important;
}


.cerca-bottom-nav
.nav-item.active > span:last-child {
    color:
        #7dd3fc !important;
}


/* INDICADOR DEL ACTIVO */

.cerca-bottom-nav
.nav-item.active::after {
    content: "";

    position: absolute;

    bottom: 1px;
    left: 50%;

    width: 17px;
    height: 2px;

    transform:
        translateX(-50%);

    border-radius:
        999px;

    background:
        #38bdf8;

    box-shadow:
        0 0 9px
        rgba(56,189,248,.55);
}


/* ==========================================================
   SOS CENTRAL
   ========================================================== */

.cerca-bottom-nav
.cerca-nav-sos {
    position: relative !important;

    left: auto !important;
    right: auto !important;

    top: auto !important;
    bottom: auto !important;

    transform:
        translateY(-17px) !important;

    justify-self:
        center !important;

    width:
        64px !important;

    height:
        64px !important;

    min-width:
        64px !important;

    min-height:
        64px !important;

    margin:
        0 !important;

    padding:
        0 !important;

    border-radius:
        50% !important;

    border:
        4px solid
        #07101d !important;

    display:
        flex !important;

    flex-direction:
        column !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    gap:
        0 !important;

    color:
        #fff !important;

    background:
        linear-gradient(
            145deg,
            #ef4444,
            #be123c
        ) !important;

    box-shadow:
        0 10px 25px rgba(239,68,68,.28),
        0 0 0 1px rgba(251,113,133,.20) !important;

    z-index:
        3 !important;
}


/* SOS ICONO */

.cerca-bottom-nav
.cerca-nav-sos
.material-icons-round {
    font-size:
        23px !important;

    line-height:
        1 !important;

    color:
        #fff !important;
}


/* SOS TEXTO */

.cerca-bottom-nav
.cerca-nav-sos strong {
    margin-top:
        2px !important;

    color:
        #fff !important;

    font-size:
        9px !important;

    line-height:
        1 !important;

    font-weight:
        900 !important;

    letter-spacing:
        .04em !important;
}


/* ==========================================================
   ESPACIO PARA QUE EL NAV NO TAPE CONTENIDO
   ========================================================== */

#view-inicio .content-scroll,
#view-alertas .content-scroll,
#view-reportar .content-scroll,
#view-perfil .content-scroll {
    padding-bottom:
        calc(
            110px +
            env(safe-area-inset-bottom)
        ) !important;
}


/* ==========================================================
   ESCRITORIO
   ========================================================== */

@media (min-width: 761px) {

    .bottom-nav.cerca-bottom-nav {
        bottom:
            14px !important;

        border-radius:
            22px !important;

        padding-bottom:
            7px !important;

        height:
            72px !important;

        box-shadow:
            0 18px 60px rgba(0,0,0,.42),
            0 0 0 1px rgba(56,189,248,.06) !important;
    }

}


/* ==========================================================
   MÓVILES PEQUEÑOS
   ========================================================== */

@media (max-width: 390px) {

    .bottom-nav.cerca-bottom-nav {
        padding-left:
            5px !important;

        padding-right:
            5px !important;

        grid-template-columns:
            1fr
            1fr
            74px
            1fr
            1fr !important;
    }


    .cerca-bottom-nav
    .nav-item > span:last-child {
        font-size:
            9px !important;
    }


    .cerca-bottom-nav
    .cerca-nav-sos {
        width:
            60px !important;

        height:
            60px !important;

        min-width:
            60px !important;

        min-height:
            60px !important;
    }

}