/* ==========================================================
   LAYOUT
========================================================== */

body{
    background:var(--background);
    color:var(--text);
}

/* ==========================================================
   APP
========================================================== */

.app{

    display:flex;

    min-height:100vh;

}

/* ==========================================================
   SIDEBAR
========================================================== */

.sidebar{

    width:200px;

    background:white;

    border-right:1px solid #E5E7EB;

    display:flex;

    flex-direction:column;

}

/* ==========================================================
   LOGO
========================================================== */

.logo{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    padding:32px 24px;

    

}

.logo-img{

    width:232px;

    height:232px;

    object-fit:contain;

    margin-bottom:1px;

}

.logo h1{

    margin:0;

    font-size:28px;

    font-weight:700;

    color:#111827;

    letter-spacing:.5px;

}

.logo p{

    margin-top:8px;

    font-size:13px;

    color:#6B7280;

    text-align:center;

    line-height:1.4;

}

/* ==========================================================
   MENU
========================================================== */

.menu{

    display:flex;

    flex-direction:column;

    gap:8px;

    padding:20px 14px;

    flex:1;

}

.menu button{

    display:flex;

    align-items:center;

    gap:12px;

    width:100%;

    padding:14px 16px;

    border:none;

    background:none;

    border-radius:12px;

    cursor:pointer;

    color:#475467;

    font-size:15px;

    font-weight:500;

    transition:.2s;

}

.menu button i{

    font-size:18px;

    width:22px;

    text-align:center;

}

.menu button:hover{

    background:#EEF4FF;

    color:#2F5FE3;

}

.menu button.ativo{

    background:#2F5FE3;

    color:#FFF;

    font-weight:600;

}

/* ==========================================================
   MAIN
========================================================== */

main{

    flex:1;

    display:flex;

    flex-direction:column;

    background:#F3F5F9;

    overflow:auto;

}

#conteudo{

    flex:1;

    padding:0 32px 32px;

    background:#F3F5F9;

}

/* ==========================================================
   HEADER
========================================================== */

.page-header{

    display:flex;

    justify-content:center;

    align-items:center;

    background:#FFF;

    border-radius:18px;

    padding:28px 36px;

    margin:24px 28px;

    box-shadow:0 4px 12px rgba(15,23,42,.04);

    border-left:5px solid #2F5FE3;

}

.page-title{

    display:flex;

    flex-direction:column;

    align-items:center;

    text-align:center;

}

.page-title h1{

    margin:0;

    font-size:42px;

    font-weight:700;

    letter-spacing:-1.2px;

    color:#101828;

    line-height:1;

}

.page-title p{

    margin-top:10px;

    font-size:15px;

    color:#667085;

    line-height:1.5;

}

.page-version{

    display:flex;

    align-items:center;

    gap:10px;

    margin-bottom:4px;

}

.app-name{

    font-size:14px;

    font-weight:700;

    color:#2F5FE3;

    letter-spacing:.5px;

}

.app-version{

    padding:4px 10px;

    border-radius:999px;

    background:#EEF4FF;

    color:#2F5FE3;

    font-size:12px;

    font-weight:600;

}

/* ==========================================================
   CONTEÚDO
========================================================== */

#conteudo{

    flex:1;

    padding:0 28px 28px;

}
/* ==========================================================
   SIDEBAR FOOTER
========================================================== */

.sidebar-footer{

    padding:20px;

    border-top:1px solid #E5E7EB;

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.footer-title{

    font-size:13px;

    font-weight:600;

    color:#667085;

}

.footer-version{

    padding:4px 10px;

    border-radius:999px;

    background:#EEF4FF;

    color:#2F5FE3;

    font-size:12px;

    font-weight:600;

}