/* Variáveis de Cores (Tema Claro Padrão) */
:root {
    --bg-body: #f0f2f5; --bg-container: #ffffff; --text-main: #333333; --text-secundario: #666666;
    --cor-primaria: #930089; --cor-primaria-hover: #7a0072; --bg-box: #f8f9fa; --border-color: #dddddd;
    --bg-dezena: #e9ecef; --cor-destaque: #fff3cd; --cor-alerta: #dc3545; --cor-sucesso: #28a745;
    --cor-neutra: #17a2b8; 
}

/* Variáveis de Cores (Dark Mode) */
body.dark-mode {
    --bg-body: #121212; --bg-container: #1e1e1e; --text-main: #e0e0e0; --text-secundario: #aaaaaa;
    --cor-primaria: #bb86fc; --cor-primaria-hover: #9b59b6; --bg-box: #2d2d2d; --border-color: #444444;
    --bg-dezena: #333333; --cor-destaque: #4a4a2a; --cor-alerta: #ff6b6b; --cor-sucesso: #4cd137;
    --cor-neutra: #4dd0e1; 
}

body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: var(--bg-body); margin: 0; padding: 20px; color: var(--text-main); transition: 0.3s; }
.container { max-width: 1100px; margin: 0 auto; background: var(--bg-container); padding: 20px 30px; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.2); position: relative;}

/* PAINEL DE TOKENS E BOTOES */
.painel-tokens { background-color: var(--bg-box); border: 2px solid #ff9f1c; padding: 6px 15px; border-radius: 20px; font-weight: bold; font-size: 14px; color: var(--text-main); box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
.painel-tokens strong { color: #ff9f1c; font-size: 16px; }

.btn-tema { background: none; border: 2px solid var(--cor-primaria); color: var(--cor-primaria); padding: 5px 15px; border-radius: 20px; cursor: pointer; font-weight: bold; transition: 0.3s; }
.btn-tema:hover { background: var(--cor-primaria); color: var(--bg-container); }
h1 { text-align: center; color: var(--cor-primaria); margin-top: 10px;}

.abas { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; border-bottom: 2px solid var(--border-color); padding-bottom: 10px; }
.aba-btn { background: var(--bg-box); color: var(--text-main); border: none; padding: 12px 25px; border-radius: 5px; cursor: pointer; font-weight: bold; font-size: 15px; transition: 0.3s; }
.aba-btn.ativa { background: var(--cor-primaria); color: #fff; }
body.dark-mode .aba-btn.ativa { color: #121212; }
.conteudo-aba { display: none; }
.conteudo-aba.ativa { display: block; }

.controles { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; background: var(--bg-box); padding: 15px; border-radius: 8px; border: 1px solid var(--border-color);}
button.nav-btn { background-color: var(--cor-primaria); color: #fff; border: none; padding: 8px 15px; border-radius: 5px; cursor: pointer; font-weight: bold; transition: 0.2s;}
body.dark-mode button.nav-btn { color: #121212; }
button.nav-btn:hover { background-color: var(--cor-primaria-hover); }
button.nav-btn:disabled { background-color: #ccc; cursor: not-allowed; color: #666; }
.btn-secundario { background-color: #6c757d !important; color: white !important;}
.btn-perigo { background-color: var(--cor-alerta) !important; color: white !important;}
.btn-sucesso { background-color: var(--cor-sucesso) !important; color: white !important;}
.btn-magico { background-color: #fd7e14 !important; color: white !important;}
.btn-magico:hover { background-color: #e86c05 !important; }
.btn-caixa { background-color: #005ca9 !important; color: white !important; font-size: 15px !important;}
.btn-caixa:hover { background-color: #004a87 !important; transform: scale(1.05); }

.input-busca { padding: 8px; border: 1px solid var(--border-color); border-radius: 5px; width: 150px; text-align: center; background: var(--bg-container); color: var(--text-main);}

/* Cartelas e Bolinhas */
.cartela-wrapper { display: flex; justify-content: center; margin: 20px 0; }
.cartela { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.dezena { width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; background-color: var(--bg-dezena); border-radius: 50%; font-size: 18px; font-weight: bold; color: var(--text-secundario); transition: 0.2s; user-select: none;}
.sorteada { background-color: var(--cor-primaria); color: #fff; box-shadow: 0 4px 6px rgba(0,0,0, 0.3); }
body.dark-mode .sorteada { color: #121212; }
.dezena-clicavel { cursor: pointer; border: 2px solid transparent; }
.dezena-clicavel:hover { border-color: var(--cor-primaria); }

.bolinha-pequena { display: inline-block; width: 28px; height: 28px; background-color: var(--cor-primaria); color: white; border-radius: 50%; text-align: center; line-height: 28px; font-size: 13px; font-weight: bold; margin: 2px; }
body.dark-mode .bolinha-pequena { color: #121212; }
.bolinha-alerta { background-color: var(--cor-alerta) !important; color: white !important; }
body.dark-mode .bolinha-alerta { color: #121212 !important; }
.bolinha-quente { background-color: #ff9f1c !important; color: #fff !important; box-shadow: 0 0 10px rgba(255, 159, 28, 0.8); border: 1px solid #dc3545;}
body.dark-mode .bolinha-quente { color: #121212 !important; }

/* Grids e Caixas */
.grid-estatisticas { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 15px; margin-top: 20px; }
.stat-box { background: var(--bg-box); padding: 15px; border-radius: 8px; text-align: center; border: 1px solid var(--border-color); border-left: 4px solid var(--cor-primaria); }
.stat-box span { display: block; font-size: 20px; font-weight: bold; color: var(--cor-primaria); margin-top: 5px;}

.painel-detalhes { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 20px; }
.detalhe-box { background: var(--bg-box); padding: 15px; border-radius: 8px; border: 1px solid var(--border-color); }
.detalhe-box h3 { margin-top: 0; color: var(--cor-primaria); font-size: 16px; border-bottom: 1px solid var(--border-color); padding-bottom: 8px; margin-bottom: 15px;}
.detalhe-box p { margin: 8px 0; font-size: 15px; color: var(--text-secundario); }

/* Tabela de Histórico */
.tabela-wrapper { overflow-x: auto; margin-top: 10px; border-radius: 8px; max-height: 400px; border: 1px solid var(--border-color); }
table { border-collapse: collapse; width: 100%; text-align: center; font-size: 13px; background: var(--bg-container);}
th, td { border: 1px solid var(--border-color); padding: 6px 4px; min-width: 22px; transition: 0.2s; }
th { background-color: var(--bg-box); color: var(--cor-primaria); font-weight: bold; position: sticky; top: 0; z-index: 2; border-bottom: 2px solid var(--cor-primaria);}
.td-concurso { font-weight: bold; background: var(--bg-box); }
.td-sorteada { background-color: var(--cor-primaria); color: #fff; font-weight: bold; border-radius: 3px; }
body.dark-mode .td-sorteada { color: #121212; }

/* Destaque da Tabela de Busca - Totalmente Repaginado */
.linha-destaque { 
    background-color: var(--cor-destaque) !important; 
}
.linha-destaque td.td-concurso {
    background-color: var(--cor-sucesso) !important;
    color: white !important;
    font-size: 14px;
}
.linha-destaque td.td-sorteada {
    background-color: #ff9f1c !important;
    color: #fff !important;
    box-shadow: 0 0 10px rgba(255, 159, 28, 0.8) !important;
    border: 1px solid #dc3545 !important;
    transform: scale(1.15);
    font-size: 14px;
    z-index: 10;
    position: relative;
}

/* Gráficos e Destaques */
.titulo-graficos { text-align: center; margin-top: 40px; color: var(--cor-primaria); border-top: 2px dashed var(--border-color); padding-top: 20px;}
.graficos-container { display: grid; grid-template-columns: 1fr; gap: 20px; margin-top: 20px; }
.graficos-linha-dupla { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.graficos-linha-tripla { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.grafico-box { background: var(--bg-box); border: 1px solid var(--border-color); padding: 15px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.05); display: flex; flex-direction: column; align-items: center; position: relative;}

.destaque-box { background: var(--bg-container); padding: 15px; border-radius: 8px; border: 1px solid var(--border-color); text-align: center; flex: 1;}
.destaque-titulo { font-size: 15px; font-weight: bold; margin-bottom: 10px; }
.destaque-forte .destaque-titulo { color: var(--cor-sucesso); }
.destaque-media .destaque-titulo { color: var(--cor-neutra); } 
.destaque-fria .destaque-titulo { color: var(--cor-alerta); }

/* Ficha Técnica (Supernova) */
.fusao-container { display: flex; gap: 20px; width: 100%; align-items: stretch; justify-content: center; flex-wrap: wrap; }
.ficha-tecnica { flex: 1; min-width: 280px; max-width: 400px; background: var(--bg-container); border: 1px dashed #ff9f1c; border-radius: 8px; padding: 15px; box-shadow: inset 0 0 10px rgba(0,0,0,0.02); transition: 0.3s; }
.ficha-titulo { font-size: 18px; font-weight: bold; color: #ff9f1c; border-bottom: 1px solid var(--border-color); padding-bottom: 8px; margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center; }
.ficha-linha { margin-bottom: 8px; font-size: 14px; line-height: 1.5; color: var(--text-main); }
.ficha-destaque { font-weight: bold; color: var(--cor-primaria); }

/* Aba Ciclos */
.ciclo-atual-box { background: var(--cor-destaque); padding: 20px; border-radius: 8px; border: 1px solid var(--border-color); text-align: center; margin-bottom: 20px;}
.simulador-layout { display: grid; grid-template-columns: 1fr 2fr; gap: 20px; align-items: start;}

/* Layout dos Jogos Salvos (Galeria de Volantes) */
#lista-jogos-salvos { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 15px; margin-top: 15px; }

.jogo-salvo-card { display: flex; flex-direction: column; align-items: center; background: var(--bg-box); padding: 15px; border: 1px solid var(--border-color); border-radius: 12px; position: relative; transition: 0.3s; box-shadow: 0 4px 6px rgba(0,0,0,0.05); }
.jogo-salvo-card.transferido { opacity: 0.6; border-color: var(--cor-sucesso); background: var(--bg-body); }
.jogo-salvo-card.transferido .mini-cartela { filter: grayscale(70%); }
.mini-cartela { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; background: var(--bg-container); padding: 10px; border-radius: 8px; border: 1px solid var(--border-color); }
.mini-dezena { width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; background-color: var(--bg-dezena); border-radius: 50%; font-size: 11px; color: var(--text-secundario); font-weight: bold; }
.mini-dezena.sorteada { background-color: var(--cor-primaria); color: #fff; box-shadow: 0 2px 4px rgba(0,0,0,0.2); }
body.dark-mode .mini-dezena.sorteada { color: #121212; }
.acoes-jogo { display: flex; flex-direction: column; gap: 10px; width: 100%; margin-top: 15px; border-top: 1px dashed var(--border-color); padding-top: 15px; }
.check-transferido { display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; color: var(--cor-sucesso); font-weight: bold; justify-content: center; }
.check-transferido input { cursor: pointer; width: 16px; height: 16px; }

/* Responsividade Geral */
@media (max-width: 768px) { 
    .simulador-layout { grid-template-columns: 1fr; } 
    .graficos-linha-dupla, .graficos-linha-tripla { grid-template-columns: 1fr; }
}

/* Restante */
.regras-ouro { background: var(--bg-box); padding: 15px; border-radius: 8px; border: 1px solid var(--border-color); font-size: 14px;}
.regra-item { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--border-color);}
.regra-item:last-child { border: none; }
.regra-status { font-weight: bold; }
.status-ok { color: var(--cor-sucesso); }
.status-warn { color: var(--cor-alerta); }
.jogos-salvos-container { margin-top: 30px; border-top: 2px dashed var(--border-color); padding-top: 20px;}

.badge-laranja { background-color: #fd7e14; color: white; padding: 2px 5px; border-radius: 4px; font-weight: bold; font-size: 13px; margin: 0 2px;}
.badge-roxo { background-color: #6f42c1; color: white; padding: 2px 5px; border-radius: 4px; font-weight: bold; font-size: 13px; margin: 0 2px;}

/* BUSCA DIRETA */
.busca-rapida { display: flex; gap: 5px; }
.busca-rapida input { width: 65px; padding: 5px; border: 1px solid var(--border-color); border-radius: 4px; background: var(--bg-container); color: var(--text-main); text-align: center; font-weight: bold; font-size: 14px; }
.busca-rapida input::-webkit-outer-spin-button, .busca-rapida input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.busca-rapida button { background: var(--cor-primaria); color: white; border: none; border-radius: 4px; cursor: pointer; padding: 5px 10px; transition: 0.2s; font-size: 14px; }
.busca-rapida button:hover { background: var(--cor-primaria-hover); transform: scale(1.05); }

/* AUDITORIA HISTÓRICA E AUTÓPSIA (MÁQUINA DO TEMPO) */
.auditoria-grid { display: flex; flex-direction: column; gap: 8px; }
.auditoria-item { display: flex; justify-content: space-between; align-items: center; background: var(--bg-box); padding: 10px 15px; border-radius: 5px; border: 1px solid var(--border-color); font-size: 15px; }
.auditoria-item.clicavel { cursor: pointer; transition: 0.2s; }
.auditoria-item.clicavel:hover { background-color: var(--bg-body); transform: scale(1.02); border-color: var(--cor-primaria); }
.detalhes-auditoria { background: var(--bg-box); border: 1px solid var(--border-color); padding: 15px; border-radius: 8px; margin-top: 15px; box-shadow: 0 4px 6px rgba(0,0,0,0.05); }
.badge-falha { display: inline-block; background: var(--cor-alerta); color: white; padding: 2px 5px; border-radius: 4px; font-weight: bold; font-size: 11px; margin-right: 3px; }
.badge-acerto { display: inline-block; background: var(--cor-sucesso); color: white; padding: 2px 5px; border-radius: 4px; font-weight: bold; font-size: 11px; margin-right: 3px; }

/* Scrollbar Personalizada para a Autópsia */
.scroll-custom::-webkit-scrollbar { width: 6px; }
.scroll-custom::-webkit-scrollbar-thumb { background: #ccc; border-radius: 4px; }
body.dark-mode .scroll-custom::-webkit-scrollbar-thumb { background: #555; }

/* ==========================================
   ESTILOS DO MODAL VIP (ATUALIZADO COM CORES REAIS)
   ========================================== */
.modal-vip-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); z-index: 9999; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(5px); }
.modal-vip-content { background: var(--bg-container); border: 2px solid var(--cor-primaria); padding: 30px; border-radius: 12px; max-width: 700px; width: 90%; position: relative; box-shadow: 0 10px 30px rgba(147, 0, 137, 0.3); text-align: center; }
.fechar-modal { position: absolute; top: 15px; right: 15px; background: transparent; border: none; color: var(--text-secundario); font-size: 20px; cursor: pointer; transition: 0.2s; }
.fechar-modal:hover { color: var(--cor-alerta); transform: scale(1.1); }
.planos-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 20px; text-align: left; }
.plano-card { background: var(--bg-body); padding: 25px 20px; border-radius: 10px; border: 1px solid var(--border-color); display: flex; flex-direction: column; position: relative; }
.plano-card.destaque { border: 2px solid #ff9f1c; box-shadow: 0 0 15px rgba(255, 159, 28, 0.15); transform: scale(1.03); }
.badge-recomendado { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: #ff9f1c; color: #1e1e1e; font-size: 11px; font-weight: bold; padding: 4px 10px; border-radius: 20px; text-transform: uppercase; }
.preco { font-size: 32px; font-weight: bold; color: var(--text-main); margin: 10px 0; }
.beneficios-lista { list-style: none; padding: 0; margin: 0; flex-grow: 1; }
.beneficios-lista li { font-size: 14px; margin-bottom: 10px; color: var(--text-main); }

@media (max-width: 600px) {
    .planos-grid { grid-template-columns: 1fr; }
    .plano-card.destaque { transform: scale(1); }
}

/* ========================================================
   AJUSTES PARA CELULARES (Telas menores que 768px)
   ======================================================== */
@media (max-width: 768px) {
    
    /* 1. O PAINEL DE CONTA E TEMA */
    #menu-topo-absoluto {
        position: relative !important; 
        top: 0 !important;
        right: 0 !important;
        width: 100% !important;
        flex-direction: column !important; 
        justify-content: center !important;
        margin-bottom: 20px !important;
    }

    /* 2. O TÍTULO PRINCIPAL */
    h1 {
        font-size: 1.5rem !important; 
        margin-top: 10px !important;
        text-align: center !important;
    }

    /* 3. MENU DE ABAS */
    .abas {
        flex-wrap: wrap !important; 
    }
    
    .aba-btn {
        flex: 1 1 45% !important; 
        font-size: 0.85rem !important;
        padding: 8px 5px !important;
        margin: 2px !important;
    }
    
    #btn-aba-simulador {
        flex: 1 1 100% !important; 
    }

    /* 4. BLOCO DO CONCURSO */
    #aba-cartela > div.controles {
        flex-wrap: wrap !important;
    }
    
    #aba-cartela > div.controles > button.nav-btn {
        flex: 1 1 40% !important; 
    }

    #aba-cartela > div.controles > div {
        width: 100% !important;
        order: -1 !important; 
        margin-bottom: 10px !important;
    }
}

/* ========================================================
   AJUSTES DEFINITIVOS PARA OS BOTÕES DO TOPO (MOBILE)
   ======================================================== */
@media (max-width: 768px) {
    
    /* Força o painel a virar uma coluna reta */
    #menu-topo-absoluto {
        position: relative !important;
        top: 0 !important;
        right: 0 !important;
        display: block !important; /* Block impede os itens de ficarem lado a lado */
        width: 100% !important;
        margin: 0 auto 15px auto !important;
        padding: 0 10px !important;
        box-sizing: border-box !important;
    }

    /* O container do botão VIP */
    #status-conta-topo {
        width: 100% !important;
        margin-bottom: 10px !important;
    }

    /* Pega todos os botões e obriga a ocupar 100% da tela empilhados */
    #btn-tema, 
    #btn-sair-topo, 
    #status-conta-topo button {
        width: 100% !important;
        display: block !important; /* Fica um em cada linha */
        margin: 0 0 10px 0 !important; /* Espaço entre eles */
        padding: 12px !important;
        box-sizing: border-box !important;
        text-align: center !important;
        white-space: nowrap !important; /* Proíbe o texto de quebrar a palavra */
        border-radius: 6px !important;
    }
}

/* ========================================================
   AJUSTES PARA A TELA ADMIN (Telas menores que 768px)
   ======================================================== */
@media (max-width: 768px) {
    
    /* 1. O Container Principal que segura o Menu e o Conteúdo */
    /* Substitua '.admin-container' pela classe que envolve toda a página se necessário */
    body, .admin-container, .wrapper {
        display: flex !important;
        flex-direction: column !important; /* Quebra o lado a lado e empilha */
    }

    /* 2. O Menu Lateral (Sidebar) */
    /* Substitua '.sidebar' pela classe da sua barra azul escura */
    .sidebar, aside {
        width: 100% !important; /* Ocupa a largura toda */
        height: auto !important; /* Deixa de ocupar a altura inteira da tela */
        min-height: auto !important;
        position: relative !important; /* Tira o efeito fixo, se houver */
        padding: 15px !important;
    }

    /* Transforma os links do menu em botões lado a lado no topo */
    .sidebar ul, .sidebar-nav {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 10px !important;
        padding: 0 !important;
    }

    .sidebar li, .sidebar a {
        flex: 1 1 45% !important;
        text-align: center !important;
        margin: 5px 0 !important;
        padding: 10px !important;
    }

    /* 3. A Área de Conteúdo Principal (Onde estão os Cards Brancos) */
    /* Substitua '.main-content' pela classe da sua área branca */
    .main-content, .content, main {
        width: 100% !important;
        margin-left: 0 !important; /* Remove margens esquerdas que abriam espaço pro menu */
        padding: 15px !important;
        box-sizing: border-box !important;
    }

    /* 4. Ajuste dos Cards Brancos de Estatísticas para não vazarem da tela */
    .cards-grid, .stats-container {
        display: flex !important;
        flex-direction: column !important; /* Coloca um card embaixo do outro */
        width: 100% !important;
    }
    
    .card, .stat-box {
        width: 100% !important;
        margin-bottom: 15px !important;
    }
}