/* Estilos específicos desta página do Time Fllu */
        body {
            background-color: #ffffff;
            margin: 0;
            min-height: 100vh;
        }

        /* O Menu Lateral Fixo */
        .sidebar-time-fllu {
            width: 280px;
            background-color: white; /* Creme Fllumen */
            border-right: 2px solid #ecd6a8; /* Dourado Fllumen */
            padding: 30px 20px;
            display: flex;
            flex-direction: column;
            box-shadow: 2px 0 10px rgba(0,0,0,0.05);
        }

        .header-sidebar-vip {
            text-align: center;
            margin-bottom: 30px;
            padding-bottom: 20px;
            border-bottom: 1px solid #dcd4c9;
        }

        .header-sidebar-vip h2 {
            font-family: 'Barlow Condensed', sans-serif;
            color: #e30613;
            margin: 0;
            font-size: 26px;
            letter-spacing: 1px;
            text-transform: uppercase;
        }

        .header-sidebar-vip p {
            color: #666;
            font-family: 'Roboto', sans-serif;
            font-size: 14px;
            margin-top: 5px;
        }

        .nav-time-fllu {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .nav-time-fllu a {
            text-decoration: none;
            font-family: 'Barlow Condensed', sans-serif;
            font-size: 20px;
            color: #333;
            padding: 12px 15px;
            border-radius: 8px;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 15px;
            font-weight: 600;
        }

        .nav-time-fllu a i {
            width: 20px;
            text-align: center;
            color: #888;
            transition: color 0.3s ease;
        }

        /* Efeito de Hover e Link Ativo */
        .nav-time-fllu a:hover, .nav-time-fllu a.ativo {
            background-color: #fff;
            color: #e30613;
            box-shadow: 0 4px 6px rgba(0,0,0,0.05);
        }

        .nav-time-fllu a:hover i, .nav-time-fllu a.ativo i {
            color: #e30613;
        }

        /* Área de Conteúdo (Onde ficarão os gráficos e dados) */
        .conteudo-time-fllu {
            flex: 1;
            padding: 40px;
            display: flex;
            flex-direction: column;
        }

        /* Tela de Carregamento de Segurança */
        #telaBloqueio {
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            background: #fff;
            z-index: 99999;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            font-family: 'Barlow Condensed', sans-serif;
            color: #333;
        }

        /* Layout Flex: Menu na ESQUERDA e Conteúdo na DIREITA */
/* Layout Flex: Menu na ESQUERDA e Conteúdo na DIREITA */
.layout-minha-conta {
    display: flex;
    max-width: 1400px; /* Aumentamos de 1200px para 1400px para a caixa ficar mais larga */
    margin: 40px auto; /* Mantém centralizado, mas como a caixa é maior, o menu vai mais para a esquerda */
    padding: 0 40px; /* Dá um respiro nas laterais para não colar totalmente no monitor */
    gap: 80px; /* Aumentei o espaço entre o menu e o conteúdo (antes era 50px) para não ficarem espremidos */
    align-items: flex-start;
}

/* O Menu Lateral (Esquerda) */
.menu-lateral-conta {
    width: 260px; /* Largura fixa do menu */
    flex-shrink: 0; /* Impede que o menu encolha em telas menores */
    background-color: transparent; /* REMOVE o fundo da caixa */
    padding: 0;
}

/* Título e Nome direto na página (Sem fundo) */
.cabecalho-time-fllu {
    text-align: left; /* Alinhado à esquerda para seguir a linha do menu */
    padding-bottom: 10px;
    background-color: transparent; /* Sem fundo colorido */
}

.titulo-fllu {
    color: #e30613; /* Vermelho Fllumen */
    font-size: 26px;
    font-weight: 800;
    margin: 0 0 5px 0;
    letter-spacing: 0.5px;
    font-family: 'Barlow Condensed', sans-serif;
}

.nome-usuario {
    color: #6c757d;
    font-size: 15px;
    margin: 0;
    font-family: 'Roboto', sans-serif;
}

.linha-separadora-topo {
    border: 0;
    border-top: 1px solid #e0e0e0;
    width: 100%;
    margin: 0 0 15px 0;
}

/* Estilos dos Links do Menu */
.navegacao-conta {
    display: flex;
    flex-direction: column;
}

.item-menu {
    text-decoration: none;
    color: #344050; /* Cinza escuro azulado */
    font-size: 15px;
    padding: 10px 0; /* Removido padding lateral para alinhar certinho na esquerda */
    display: block;
    transition: color 0.2s;
    font-family: 'Roboto', sans-serif;
}

.item-menu:hover {
    color: #e30613;
}

/* A barrinha vermelha na esquerda quando o link está selecionado */
.item-menu.ativo {
    font-weight: bold;
    color: #1a2b3c;
    border-left: 3px solid #e30613;
    padding-left: 10px; /* Dá espaço para o texto não colar na linha */
    margin-left: -13px; /* Puxa a linha para fora, mantendo o texto 100% alinhado com os outros */
}

.item-menu.destaque {
    color: #e30613;
}

.linha-separadora {
    border: 0;
    border-top: 1px solid #eaeaea;
    margin: 10px 0;
}

/* --- A Parte do Conteúdo (Direita) --- */
.conteudo-time-fllu {
    flex: 1; /* Faz o conteúdo ocupar todo o resto do espaço livre da tela */
    background-color: transparent; 
}

.titulo-conteudo {
    font-family: 'Barlow Condensed', sans-serif;
    color: #e30613;
    font-size: 36px;
    text-transform: uppercase;
    margin-top: 0; /* Remove espaço sobrando no topo para ficar alinhado com o menu */
}

.texto-conteudo {
    font-family: 'Roboto', sans-serif;
    color: #666;
    font-size: 16px;
}

/* =========================================
   ESTILOS DO MODAL
========================================= */

/* Fundo escuro semi-transparente que cobre a tela toda */
.modal-overlay {
    display: none; /* Começa escondido */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 9999; /* Garante que fique por cima de TUDO */
    align-items: center;
    justify-content: center;
}

/* Classe que o JavaScript vai usar para mostrar o modal */
.modal-overlay.ativo {
    display: flex;
}

/* A caixa branca do modal */
.modal-caixa {
    background-color: #ffffff;
    padding: 40px;
    border-radius: 8px;
    width: 90%;
    max-width: 670px;
    min-height: 370px;
    position: relative; /* Importante para o X ficar no canto desta caixa */
    box-shadow: 0 40px 25px rgba(0,0,0,0.2);
    text-align: center;
}

/* O "X" de fechar no canto superior direito */
.fechar-modal {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 30px;
    font-weight: bold;
    color: #999;
    cursor: pointer;
    transition: color 0.2s ease;
    line-height: 1;
}

/* Efeito ao passar o mouse no "X" */
.fechar-modal:hover {
    color: #e30613; /* Fica com o vermelho da Fllumen */
}