:root{
    --navbar-height:72px;
}

body{
    background:#f5f7fb;
    padding-top:var(--navbar-height);
}

.navbar{
    height:var(--navbar-height);
    
    min-height:65px;

    background:#0d6efd;

    transition:all .35s ease;

    backdrop-filter:blur(0px);
    -webkit-backdrop-filter:blur(0px);
}

.navbar.scrolled{

    background:rgba(13,110,253,.78);

    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);

    box-shadow:0 8px 25px rgba(0,0,0,.18);

}


.offcanvas{

    width:320px;

    margin:12px;

    top:var(--navbar-height);
    
    height:calc(100% - var(--navbar-height));

    border-radius:18px;

    border:none;

    background:rgba(255,255,255,.78);

    backdrop-filter:blur(14px);

    -webkit-backdrop-filter:blur(14px);

    box-shadow:0 20px 45px rgba(0,0,0,.25);

}

.offcanvas-header{

    border-bottom:1px solid rgba(0,0,0,.08);

}

.offcanvas-backdrop{

    background:#000;

}

.offcanvas-backdrop.show{

    opacity:.18;

}

.list-group-item{

    border:none;

    border-radius:10px;

    margin-bottom:4px;

    transition:.25s;

    background:transparent;

}

.list-group-item:hover{

    background:#0d6efd;

    color:#fff;

}

.list-group-item:hover i{

    color:#fff !important;

}

.collapse .list-group-item{

    padding-left:45px;

    font-size:.95rem;

}

.card{

    border:none;

    border-radius:12px;

}

.img-profile{

    width:42px;

    height:42px;

    border-radius:50%;

    object-fit:cover;

}

#sidebar{
    width:260px;
    transition:.3s;
}

#sidebar.collapsed{
    width:80px;
}

#sidebar.collapsed span{
    display:none;
}

/*=========================
        FOOTER
=========================*/

.footer-area{

    /*margin-top:40px;*/

    padding:60px 0;

    background:
    radial-gradient(circle at center,
        #eef8ff 0%,
        #cfeeff 45%,
        #9fd4ff 100%);

}

/* Tarjeta */

.footer-glass{

    border-radius:22px;

    background:rgba(255,255,255,.82);

    backdrop-filter:blur(18px);

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

    border:1px solid rgba(255,255,255,.65);

    box-shadow:0 15px 45px rgba(13,110,253,.15);

}

/* Título */

.footer-glass h4{

    color:#0d6efd;

    font-weight:700;

}

/* Texto */

.footer-glass p{

    color:#555;

    line-height:1.7;

}

/* Enlaces */

.footer-glass a{

    display:inline-block;

    margin:6px 10px;

    color:#495057;

    text-decoration:none;

    font-weight:500;

    transition:.25s;

}

.footer-glass a:hover{

    color:#0d6efd;

    transform:translateY(-2px);

}

/* Línea */

.footer-glass hr{

    margin:25px 0;

    opacity:.15;

}

/* Copyright */

.footer-glass .copyright{

    color:#6c757d;

    font-size:.95rem;

}

.footer-glass .copyright strong{

    color:#0d6efd;

}


/*=========================
    BOTÓN SCROLL TOP
=========================*/

#scrollTopBtn{
    position:fixed;
    bottom:30px;
    right:30px;
    width:55px;
    height:55px;

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

    border:none;
    border-radius:50%;

    background:rgba(13,110,253,.90);
    color:#fff;

    font-size:22px;

    cursor:pointer;

    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);

    box-shadow:0 12px 30px rgba(13,110,253,.35);

    opacity:0;
    visibility:hidden;

    transform:translateY(20px);

    transition:all .35s ease;

    z-index:9999;
}

#scrollTopBtn.show{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

#scrollTopBtn:hover{

    background:#0b5ed7;

    transform:translateY(-4px) scale(1.08);

    box-shadow:0 18px 35px rgba(13,110,253,.45);

}

#scrollTopBtn:active{

    transform:scale(.92);

}