.header{ height:70px; display:flex; justify-content:space-between; align-items:center; padding:0 30px; background:white; } .header-left{ display:flex; align-items:center; gap:28px; } .header-left h2{ font-size:28px; color:#2F3640; } .header-left span{ color:#7F8C8D; font-size:14px; } /* Slot vazio por padrão (ver #headerExtra em js/app.js) — só ganha conteúdo/alinhamento quando alguma página injeta algo nele, então não afeta o header nas páginas que não usam esse slot. */ .header-extra{ display:flex; align-items:center; } .header-right{ display:flex; align-items:center; gap:20px; } .search{ width:280px; padding:12px 18px; border-radius:10px; border:1px solid #DDD; outline:none; } /* Indicador de "Último backup" (pedido do usuário, 2026-07-18) — ver #backupIndicator em montarHeader(), js/app.js, e atualizarExibicaoUltimoBackup() em js/configuracoes.js. Começa "hidden" no HTML e só aparece quando já existe um backup ou exportação registrado neste navegador. */ .backup-indicator{ display:flex; align-items:center; gap:8px; padding:0 14px; height:45px; background:#F5F7FA; border-radius:10px; font-size:13px; color:#7F8C8D; white-space:nowrap; } .backup-indicator strong{ color:#2F3640; font-weight:600; } .backup-indicator i{ width:15px; height:15px; color:#7F8C8D; flex-shrink:0; } .notification{ width:45px; height:45px; border:none; background:#F5F7FA; border-radius:10px; cursor:pointer; font-size:18px; } .notification:hover{ background:#ECECEC; } .user{ display:flex; align-items:center; gap:12px; } .avatar{ width:45px; height:45px; border-radius:50%; background:#8F1730; color:white; display:flex; justify-content:center; align-items:center; font-weight:bold; } /* =========================== CABEÇALHO MINIMALISTA (sem faixa branca — usado na página de Comissões, que já não repete o título mais abaixo) =========================== */ #header.header--minimo{ background:transparent; border-bottom:none; } #header.header--minimo .header{ background:transparent; } /* =========================== BOTÃO DE PRIVACIDADE (olho) Injetado em #headerExtra pelas próprias páginas de Dashboard e Comissões (ver montarBotaoPrivacidadeNoHeader em js/ui.js) — mesmo padrão do toggle de Tipo de Assembleias. Um botão só por página: alterna a classe "privacidade-ativa" no , que embaça (blur) todo elemento marcado com a classe "valor-privado" (regra em css/style.css, por ser algo reaproveitado por mais de uma página). =========================== */ .btn-privacidade{ width:45px; height:45px; display:flex; align-items:center; justify-content:center; border:none; background:#F5F7FA; border-radius:10px; color:#555F6B; cursor:pointer; transition:background .15s,color .15s; } .btn-privacidade:hover{ background:#ECECEC; } .btn-privacidade.ativo{ background:#8F1730; color:#fff; } .btn-privacidade i{ width:19px; height:19px; } /* =========================== SELETOR DE PERFIL (protótipo Consultor/Equipe/Gestor) Montado uma única vez em #seletorPerfilContainer (fora do #headerExtra, que é limpo a cada troca de página — ver js/perfil.js, montarSeletorPerfilNoHeader). Sem senha/permissão real por trás: troca só a visão dos dados já salvos neste navegador. =========================== */ .seletor-perfil{ height:45px; padding:0 14px; border:1px solid #E2E2E2; border-radius:10px; background:#F5F7FA; color:#2F3640; font-size:13px; font-weight:600; cursor:pointer; outline:none; max-width:190px; } .seletor-perfil:hover{ background:#ECECEC; } /* =========================== BOTÃO "SAIR" (Fundação — logout real, ver js/authGuard.js) Mesmo padrão visual de .notification/.btn-privacidade (botão quadrado 45x45, fundo neutro), só troca a cor no hover para o vermelho da marca, já que é uma ação de saída da conta. =========================== */ .btn-sair{ width:45px; height:45px; display:flex; align-items:center; justify-content:center; border:none; background:#F5F7FA; border-radius:10px; color:#555F6B; cursor:pointer; transition:background .15s,color .15s; } .btn-sair:hover{ background:#FDEEEE; color:#8B0000; } .btn-sair i{ width:19px; height:19px; }