/* --- VARIÁVEIS GLOBAIS --- */
:root {
    --cor-centro: #1e272e;
    --cor-borda: #0fbcf9;
    --cor-texto-escuro: #2f3542;
    --cor-fundo: #f1f2f6;
}

/* --- RESET E BASE --- */
html, body {
    margin: 0; 
    padding: 0; 
    width: 100%; 
    height: 100dvh; /* Garante altura total em dispositivos móveis */
    background-color: var(--cor-fundo);
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    color: var(--cor-texto-escuro);
    line-height: 1.6;
    overflow: hidden; /* Evita scrolls indesejados fora do container */
}

/* --- FAIXAS (TOP E RODAPÉ) --- */
.faixa-titulo, .faixa-rodape {
    position: fixed; 
    left: 0; 
    width: 100%; 
    height: 60px;
    background-color: var(--cor-centro); 
    color: white;
    display: flex; 
    align-items: center; 
    justify-content: center; 
    z-index: 1000;
}

.faixa-titulo { 
    top: 0; 
    box-shadow: 0 2px 10px rgba(0,0,0,0.2); 
}

.faixa-rodape { 
    bottom: 0; 
    box-shadow: 0 -2px 10px rgba(0,0,0,0.2); 
}

/* --- TÍTULO DO SITE (Ajustado) --- */
.titulo-texto { 
    font-size: 24px; /* Aumentado */
    font-weight: 800; 
    letter-spacing: 2px; 
    text-transform: uppercase;
    background: linear-gradient(to bottom, #ffffff, #d1d1d1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* --- ÍCONES SUPERIORES (Config/Perfil) --- */
.btn-icon {
    position: absolute; 
    top: 50%; 
    transform: translateY(-50%);
    display: flex; 
    align-items: center; 
    justify-content: center;
    cursor: pointer; 
    width: 45px; 
    height: 45px;
}

.btn-icon img { 
    width: 32px; /* Ícone um pouco maior */
    height: 32px; 
    filter: brightness(0) invert(1);
    transition: transform 0.2s ease;
}

.btn-icon:active img { 
    transform: scale(0.85); /* Efeito de clique */
}

.btn-icon-esq { left: 15px; }
.btn-icon-dir { right: 15px; }

/* --- ASSISTENTE IA (CENTRO DO RODAPÉ) --- */
.btn-voz-centro {
    width: 38px; 
    height: 38px; 
    background: white; 
    border-radius: 50%;
    display: flex; 
    align-items: center; 
    justify-content: center;
    cursor: pointer; 
    position: relative; 
    border: 2px solid var(--cor-borda);
    z-index: 1001;
}

.btn-voz-centro::after {
    content: ''; 
    position: absolute; 
    width: 100%; 
    height: 100%;
    border-radius: 50%; 
    background: var(--cor-borda); 
    opacity: 0.5;
    animation: pulsar-ia 2s infinite ease-out;
}

@keyframes pulsar-ia {
    0% { transform: scale(1); opacity: 0.8; }
    100% { transform: scale(1.6); opacity: 0; }
}

.inner-ia { 
    width: 15px; 
    height: 15px; 
    background: var(--cor-borda); 
    border-radius: 50%; 
}

/* --- BOTÕES LATERAIS DO RODAPÉ (Doar/Início) --- */
.btn-lateral-esq, .btn-lateral-dir {
    position: absolute; 
    top: 50%; 
    transform: translateY(-50%);
    color: white; 
    text-decoration: none; 
    font-size: 14px; 
    font-weight: bold; 
    border: 1.5px solid rgba(255,255,255,0.3); 
    padding: 10px 22px; /* Botões mais elegantes */
    border-radius: 25px; 
    cursor: pointer; 
    text-transform: uppercase; 
    line-height: 1;
    transition: all 0.2s ease;
}

.btn-lateral-esq { left: 20px; }
.btn-lateral-dir { right: 20px; }

.btn-lateral-esq:active, .btn-lateral-dir:active {
    background: rgba(255,255,255,0.1);
    transform: translateY(-50%) scale(0.95);
}

// Sistema de Notificações Global
function iniciarNotificacoes() {
    if ("Notification" in window) {
        if (Notification.permission !== "granted" && Notification.permission !== "denied") {
            Notification.requestPermission();
        }
    }
    setInterval(verificarMetasAgendadas, 30000); // Verifica a cada 30 segundos
}

function verificarMetasAgendadas() {
    const pilares = ['saude', 'mente', 'financas', 'lazer', 'lar', 'persona', 'relacoes'];
    const agora = new Date();

    pilares.forEach(pilarId => {
        let metas = JSON.parse(localStorage.getItem(`vida7_metas_${pilarId}`)) || [];
        let houveMudanca = false;

        metas.forEach(meta => {
            if (meta.data && !meta.concluida && !meta.alertaDisparado) {
                const dataMeta = new Date(meta.data);
                
                // Dispara se estiver dentro do minuto atual
                if (agora >= dataMeta && agora < new Date(dataMeta.getTime() + 60000)) {
                    enviarAlertaFisico(meta, pilarId);
                    meta.alertaDisparado = true;
                    houveMudanca = true;
                }
            }
        });

        if (houveMudanca) {
            localStorage.setItem(`vida7_metas_${pilarId}`, JSON.stringify(metas));
        }
    });
}

function enviarAlertaFisico(meta, pilar) {
    const titulo = `📍 PLANO DE AÇÃO: ${pilar.toUpperCase()}`;
    const mensagem = meta.texto;

    // 1. Tenta a Notificação do Sistema (aquela que aparece no topo do Windows/Android)
    if ("Notification" in window && Notification.permission === "granted") {
        new Notification(titulo, {
            body: mensagem,
            icon: `img/${pilar}.png`,
            vibrate: [200, 100, 200]
        });
    }

    // 2. SEMPRE mostra o Alerta Pop-up (Plano B Infalível)
    // Esse aqui funciona mesmo se as notificações estiverem bloqueadas!
    setTimeout(() => {
        alert(`${titulo}\n\n${mensagem}`);
    }, 500); // Meio segundo de atraso só para não travar o navegador instantaneamente
}

// Expõe a função para o window.onload do index
window.iniciarNotificacoes = iniciarNotificacoes;