* {
    margin: 0;
    padding: 0;
}

html,
body {
    margin: 0;
    padding: 0;

    width: 100%;
    min-height: 100vh;

    background-color: var(--color-bg);
    color: var(--color-text);

    overflow-x: hidden; /* impedir scroll horizontal (bug) */
}

.logo {
    height: 55px;
    width: 55px;
    border-radius: 15px;
}

.navbar {

    height: 80px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;

}

/* ----------------- INÍCIO DA ESTILIZAÇÃO DA NAVBAR ----------------- */

:root {
    --color-bg: #0b0a10;
    --color-surface: #140b24;
    --color-surface-2: #1b1030;
    --color-border: #2a1b45;
    --color-primary: #4a08a6;
    --color-secondary: #3f078c;
    --color-accent: #bff205;
    --color-text: #f5f5f7;
    --color-muted: #c9c9d3;

    /* aliases for existing usage */
    --color-purple-neon: var(--color-primary);
    --color-lime-green: var(--color-accent);
}

.diego {
    display: flex;
    align-items: center;
    height: 100%;
    width: auto;

    margin-left: 25px;
}

/* Estilo base dos links da Navbar */
.pgs a {
    color: var(--color-text);
    text-decoration: none;
    font-size: 21px;
    width: min-content;
    transition: all 0.3s ease; /* Suaviza a troca de cor */
    position: relative;

    /*MANTENDO ALINHAMENTO*/
    padding: 8px 16px; /* Mesmo padding do ativo */
    border: 2px solid transparent; /* Borda invisível para ocupar espaço */
}

/* Efeito Hover (Ao passar o mouse): Fica VERDE NEON */
.pgs a:hover {
    color: var(--color-accent);
    text-shadow: 0 0 12px rgba(245, 158, 11, 0.5);
    transform: translateY(-2px); /* Leve subida */
}

/* Estado Ativo (Página Atual): Retângulo Roxo */
.pgs a.active {
    color: var(--color-primary);
    border: 2px solid var(--color-primary); 
    padding: 8px 16px;
    border-radius: 8px;
    
    box-shadow: 0 0 18px rgba(45, 108, 223, 0.4), inset 0 0 10px rgba(45, 108, 223, 0.18);
}

.pgs {
    display: flex;
    width: 350px;
    justify-content: space-between;
}

/* Navbar responsive toggle (global) */
.nav-toggle {
    display: none;
    background: transparent;
    border: 2px solid transparent;
    color: var(--color-text);
    font-size: 22px;
    padding: 6px 10px;
    margin-right: 10px;
    cursor: pointer;
}

@media (max-width: 800px) {
    .nav-toggle {
        display: block;
    }
    .navbar {
        position: relative;
        padding-inline: 12px;
    }
    .navbar .pgs {
        display: none;
        position: absolute;
        top: 80px;
        left: auto;
        right: 0;
        width: 250px;
        border-bottom-left-radius: 12px;
        background: var(--color-surface-2);
        padding: 12px;
        gap: 10px;
        flex-direction: column;
        align-items: right;
        z-index: 30;
        box-shadow: 0 8px 30px rgba(16, 32, 64, 0.6);
    }
    .navbar.open .pgs {
        display: flex;
    }
    .navbar .pgs a {
        padding: 10px 12px;
        border-radius: 6px;
        align-self: end;
    }

    .navbar.open .pgs {
        justify-content: right;
    }
    .navbar .user {
        display: none; /* ocultar user no menu pequeno para não sobrecarregar */
    }
}



.titulo-secao {
    color: var(--color-primary);
    font-size: 1.8rem;    
    margin-left: 15%;
    margin-right: 15%;
    text-align: left;

    font-size: 33px;
}

/* Profile dropdown menu */
.profile-menu{
    display: none;
    position: absolute;
    right: 16px;
    top: 70px;
    min-width: 200px;
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 8px 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.6);
    z-index: 60;
}
.profile-menu .profile-name{ font-weight:700; padding:8px 10px; color:var(--color-text); }
.profile-menu .profile-sep{ height:1px; background:rgba(255,255,255,0.03); margin:6px 0; }
.profile-menu .menu-item{ display:block; padding:8px 10px; color:var(--color-text); text-decoration:none; border-radius:6px; }
.profile-menu .menu-item:hover{ background: rgba(255,255,255,0.02); color:var(--color-primary); }

.profile-menu .btn-logout{ background:transparent; border:none; text-align:left; width:100%; cursor:pointer; font:inherit; color:var(--color-text); padding:8px 10px; border-radius:6px; }
.profile-menu .btn-logout:hover{ background: rgba(255,255,255,0.02); color:var(--color-primary); }

@media (max-width: 800px){
    .profile-menu{ right: 8px; top: 60px; }
}
/* Modal styles (Shared) */
.modal-overlay{
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.8);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1200;
}
.modal-overlay.active{ display: flex; }
.modal-window{
    background: var(--color-surface, #0f1720);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    width: 92%;
    max-width: 420px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.8);
    color: var(--color-text);
    padding: 18px;
}
.modal-header{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.modal-title{ font-weight:800; font-size:18px; color: var(--color-primary); }
.modal-close{ background:transparent; border:none; color:var(--color-muted); font-size:24px; cursor:pointer; }
.modal-body{ margin-top:16px; display:flex; flex-direction:column; gap:10px; }
.modal-option{ display:block; text-align:left; padding:12px 14px; border-radius:8px; border:1px solid rgba(255,255,255,0.05); background:var(--color-surface-2); color:var(--color-text); cursor:pointer; font-weight:700; transition: all 0.2s; }
.modal-option:hover{ background: rgba(45, 108, 223, 0.2); border-color: var(--color-primary); }

@media (min-width: 768px){
    .modal-window{ padding:24px; }
}