/* =====================================================
   MENU PRINCIPAL - DINÂMICO FGV
===================================================== */


/* TOPO FIXO */

.topo-app {

    position: fixed;

    top:0;
    left:0;

    width:100%;
    height:60px;

    background:#0f172a;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:0 25px;

    box-sizing:border-box;

    z-index:2000;

    color:white;

}


/* LOGO / BOTÃO MENU */

.logo-app {

    background:none;

    border:none;

    color:white;

    font-size:20px;

    font-weight:bold;

    cursor:pointer;

}


/* ÁREA DIREITA */

.acoes-topo {

    display:flex;

    align-items:center;

    gap:20px;

}


.acoes-topo button {

    background:none;

    border:none;

    color:white;

    font-size:22px;

    cursor:pointer;

}



/* CONTADOR */

#contador-notificacoes {

    font-size:13px;

}


.painel-notificacoes {

    position:absolute;
    top:60px;
    right:20px;

    width:320px;

    background:#1e293b;
    color:white;

    padding:15px;

    border-radius:10px;

    box-shadow:0 5px 20px rgba(0,0,0,.3);

    z-index:9999;

}


.oculto{

    display:none;

}


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


.menu-lateral {

    position:fixed;

    top:60px;

    left:-280px;

    width:260px;

    height:calc(100vh - 60px);


    background:#111827;

    padding:20px;

    box-sizing:border-box;


    transition:.3s;

    z-index:1500;


    box-shadow:5px 0 20px rgba(0,0,0,.3);

}



.menu-lateral.ativo {

    left:0;

}



.menu-lateral h3 {

    color:white;

    margin-bottom:25px;

}



.menu-lateral button {


    width:100%;

    padding:14px;


    margin-bottom:12px;


    border:none;


    border-radius:10px;


    background:#1e293b;


    color:white;


    text-align:left;


    cursor:pointer;


    font-size:15px;


    transition:.2s;

}



.menu-lateral button:hover {

    background:#334155;

    transform:translateX(5px);

}



/* =====================================================
   COMPENSAÇÃO DO CONTEÚDO
===================================================== */


#screen-map {

    padding-top:60px;

}


/* =====================================================
   PAINEL PERFIL
===================================================== */


.painel-perfil {

    position:fixed;

    top:75px;

    right:-360px;

    width:300px;

    background:#1e293b;

    color:white;

    padding:20px;

    border-radius:15px 0 0 15px;

    box-shadow:-5px 5px 25px rgba(0,0,0,.4);

    transition:.35s ease;

    z-index:7000;

}



.painel-perfil.ativo {

    right:0;

}



.perfil-cabecalho {

    display:flex;

    align-items:center;

    gap:15px;

    margin-bottom:25px;

}



.perfil-avatar {

    width:60px;

    height:60px;

    border-radius:50%;

    background:#334155;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:32px;

}



.perfil-cabecalho h3 {

    margin:0;

    font-size:20px;

}



.perfil-cabecalho span {

    color:#38bdf8;

}



.perfil-status {

    display:grid;

    gap:12px;

}



.status-item {

    display:flex;

    align-items:center;

    gap:15px;

    background:#334155;

    padding:10px;

    border-radius:10px;

}



.status-item span {

    font-size:25px;

}



.status-item small {

    display:block;

    color:#cbd5e1;

}



.status-item strong {

    font-size:18px;

}



#btn-fechar-perfil {

    width:100%;

    margin-top:20px;

    padding:12px;

    border:none;

    border-radius:8px;

    background:#ef4444;

    color:white;

    cursor:pointer;

}


/* =========================================
   PAINEL DE EVOLUÇÃO
========================================= */


.btn-evolucao{

    width:100%;

    margin-top:15px;

    padding:12px;

    border:none;

    border-radius:10px;

    cursor:pointer;

}



.painel-evolucao{

    margin-top:15px;

    padding:15px;

    border-radius:12px;

}



.painel-evolucao.oculto{

    display:none;

}