/* Modo escuro do Gestalium. So faz efeito quando a tag tem a classe "modo-escuro" (adicionada via JavaScript, de acordo com a preferencia salva no navegador da pessoa). Abordagem: em vez de tentar sobrescrever cor por cor de cada elemento (o sistema tem centenas de cores fixas espalhadas pelas telas, e cobrir uma por uma sempre deixa buracos - textos ilegiveis, fundos que nao mudam), o conteudo principal (.main-area) e INVERTIDO como um todo: o que era branco vira escuro, o que era escuro vira claro, e a matiz das cores (vermelho, verde, dourado) e reajustada de volta para nao ficar com as cores trocadas. Isso garante cobertura completa e consistente, sem depender de conhecer cada cor fixa do sistema. Imagens e a logo sao invertidas de volta, para nao ficar com as cores erradas. */ html.modo-escuro .main-area{ background: #d7e6f1 !important; filter: invert(1) hue-rotate(180deg); } /* Imagens, SVGs e a logo dentro do conteudo sao invertidos de volta ao normal (senao ficam com as cores trocadas, tipo fotos em negativo) */ html.modo-escuro .main-area img, html.modo-escuro .main-area svg{ filter: invert(1) hue-rotate(180deg); } /* Menu em azul-marinho suave, proximo ao fundo da area principal. */ html.modo-escuro .sidebar{ background: #122b3b !important; } html.modo-escuro .sidebar-logo{ border-bottom-color: rgba(255,255,255,0.06) !important; } html.modo-escuro .nav-item.ativo{ background: rgba(18,184,134,0.13) !important; } html.modo-escuro .sidebar-overlay-mobile.visivel{ background: rgba(0,0,0,0.7) !important; } /* O botao hamburguer do celular fica fora do .main-area (e fixo na tela), entao precisa do seu proprio ajuste para ficar escuro tambem */ html.modo-escuro .menu-hamburguer{ background: #122b3b !important; } /* Ajustes finos por cima da inversao (o filtro sozinho deixa bordas e sombras sutis quase invisiveis, e cria um efeito de "relevo" duro em elementos com fundo branco solido, como a logo da empresa). Como estes elementos ainda estao dentro de .main-area, o valor declarado aqui tambem passa pela inversao — por isso as cores usadas aqui parecem "trocadas": um cinza medio continua um cinza medio depois de invertido, e uma sombra clara vira uma sombra escura depois de invertida. */ /* Bordas dos cards com um cinza medio, que continua bem visivel depois de invertido (em vez do cinza bem claro original, que fica quase preto sobre preto e some) */ html.modo-escuro .painel, html.modo-escuro .caixa, html.modo-escuro .card, html.modo-escuro .card-empresa, html.modo-escuro .card-lancamento, html.modo-escuro .card-frase, html.modo-escuro .card-prioridade-topo, html.modo-escuro .stat-topo-card, html.modo-escuro .resumo-card, html.modo-escuro .tarefa-item, html.modo-escuro .prioridade-item, html.modo-escuro .painel-calendario-dash, html.modo-escuro .grade-semana-dash, html.modo-escuro .coluna-financeiro-dash, html.modo-escuro .onboarding-passo{ background: #cfdfeb !important; border-color: #a8becd !important; } /* Sombra: um valor claro pre-inversao vira uma sombra escura e suave depois de invertido, devolvendo a profundidade que o filtro sozinho tira dos cards */ html.modo-escuro .painel, html.modo-escuro .caixa, html.modo-escuro .card-empresa{ box-shadow: 0 2px 8px rgba(235,235,235,0.12) !important; } /* A logo da empresa tinha um fundo branco solido (para dar uma "moldura" no card claro original). Depois de invertido, esse fundo virava um quadrado preto com uma borda de transicao dura, parecendo um relevo/ chanfro. Em vez disso, no modo escuro a logo fica sem fundo proprio, flutuando direto sobre o card. */ html.modo-escuro .logo-mini-card{ background: transparent !important; border-color: transparent !important; } /* Tabelas, campos de formulario e estados vazios recebem a mesma base suave dos cards, em vez de ficarem pretos puros */ html.modo-escuro table, html.modo-escuro .tabela-financeiro, html.modo-escuro .tabela-simples, html.modo-escuro .tabela-relatorio, html.modo-escuro input, html.modo-escuro select, html.modo-escuro textarea, html.modo-escuro .vazio{ background: #cfdfeb !important; border-color: #a8becd !important; } /* Barra de rolagem (Chrome/Edge/Safari) escura, para combinar */ html.modo-escuro ::-webkit-scrollbar{ background: #152b38; } html.modo-escuro ::-webkit-scrollbar-thumb{ background: #3a5667; border-radius: 6px; } /* Paleta azul-acinzentada: os tons claros da area principal sao compensacoes para o filtro de inversao acima, nao cores finais. Menu e pagina usam tons proximos para evitar o salto para preto puro. */ html.modo-escuro{background:#152b38;} html.modo-escuro body{background:#152b38;} html.modo-escuro .sidebar-logo{border-bottom-color:rgba(157,190,209,.12) !important;} html.modo-escuro .sidebar .nav-item{color:#b8cbd8;} html.modo-escuro .sidebar .nav-item.ativo{color:#9aead5;background:rgba(45,212,191,.12) !important;} html.modo-escuro .main-area input:not([type="checkbox"]):not([type="radio"]), html.modo-escuro .main-area select, html.modo-escuro .main-area textarea{background:#d7e6f1 !important;} @media (prefers-reduced-motion:no-preference){ .sidebar,.menu-hamburguer{transition:background-color .2s ease;} }