/* =========================================================== REI CONNECT — estilos gerais ----------------------------------------------------------- 2026-08-21 (ponto 1.5 do Raio-X): até aqui, TODO o CSS do sistema morava num arquivo só (style.css, quase 3.000 linhas), e o índice aqui em cima listava só as 5 primeiras seções — já estava desatualizado havia tempo. Fica difícil achar "onde mexer" num arquivo desse tamanho. Virou 17 arquivos, um por assunto, cada um com seu próprio comentário de cabeçalho explicando o que tem dentro e quais páginas usam: variaveis · base · sidebar · topbar · dashboard · recursos · clientes · modais · financeiro · novo-cliente · avisos · produtos · whatsapp · perfil-acessos · detalhes-os · contrato-assinatura · utilitarios Nada de visual mudou — é o MESMO texto de antes, só reorganizado em arquivos menores. Toda página carrega os 17 arquivos, nessa MESMA ordem (é a ordem que já existia dentro do style.css antigo — importa manter, porque em CSS quem vem depois pode sobrescrever quem veio antes). Se um dia precisar de uma 18ª "gaveta", é só criar o arquivo novo e adicionar a tag em todas as páginas, na posição certa dentro dessa ordem. =========================================================== */ /* ----------------------------------------------------------- 1. VARIÁVEIS DE COR Uma "variável CSS" é só um nome pra guardar um valor (aqui, uma cor) — em vez de escrever a mesma cor várias vezes pelo arquivo, escrevemos var(--nome-da-variavel). Assim, pra trocar uma cor em tudo que a usa, muda-se em um lugar só, aqui em cima. O tema escuro é o padrão. Quando a página ganha o atributo data-theme="light" (feito pelo botão de sol, via js/theme.js), o bloco [data-theme="light"] ali embaixo substitui os valores — e como as variáveis ficam no , TODA a página (incluindo o menu lateral) responde à troca, não só uma parte. ----------------------------------------------------------- */ :root { --cor-fundo: #000000; --cor-fundo-sidebar: #000000; --cor-fundo-cartao: #141414; --cor-borda-cartao: #262626; --cor-hover: #1a1a1a; --cor-texto-principal: #f5f5f5; --cor-texto-secundario: #9a9a9a; --cor-texto-fraco: #6b6b6b; /* botão "Sair" (ação de risco/atenção) */ --cor-fundo-perigo: #2a1414; --cor-borda-perigo: #7a2222; --cor-texto-perigo: #f5f5f5; /* cor da marca REI CONNECT — não muda entre os temas */ --cor-laranja: #FC5503; /* cores de status — também não mudam entre os temas, pra continuarem fáceis de reconhecer nos dois casos */ --cor-verde: #22C55E; --cor-vermelho: #EF4444; --cor-azul: #3B5BDB; --cor-ambar: #92613A; /* 2026-08-21 (ponto 8.6 do Raio-X): essas cores acima, usadas como COR DE TEXTO (não fundo/borda/ícone sólido), ficam ilegíveis no tema claro — testei com a fórmula oficial de contraste (WCAG) e vários casos ficavam abaixo do mínimo confortável de leitura. No tema escuro, essas variáveis abaixo repetem exatamente a mesma cor de sempre (nada muda); só o bloco do tema claro, mais abaixo, escurece o tom pra ficar legível — a cor continua "reconhecível" como laranja/verde/vermelho/âmbar, só mais forte. */ --cor-texto-laranja: var(--cor-laranja); --cor-texto-verde: var(--cor-verde); --cor-texto-vermelho: var(--cor-vermelho); --cor-texto-vermelho-claro: #f87171; --cor-texto-ambar: #f5a623; --cor-texto-azul-claro: #7d95f5; --cor-texto-roxo: #a78bfa; } [data-theme="light"] { --cor-fundo: #F3F4F6; --cor-fundo-sidebar: #FFFFFF; --cor-fundo-cartao: #FFFFFF; --cor-borda-cartao: #E5E7EB; --cor-hover: #ECEDEF; --cor-texto-principal: #111827; --cor-texto-secundario: #4B5563; --cor-texto-fraco: #6B7280; --cor-fundo-perigo: #FEE2E2; --cor-borda-perigo: #FCA5A5; --cor-texto-perigo: #B91C1C; /* ponto 8.6 — versões escurecidas, só pra cor de TEXTO, testadas uma por uma pra passar no contraste mínimo confortável (WCAG AA) contra o fundo branco/cinza-claro do tema claro */ --cor-texto-laranja: #9A3412; --cor-texto-verde: #106B36; --cor-texto-vermelho: #B91C1C; --cor-texto-vermelho-claro: #B91C1C; --cor-texto-ambar: #92400E; --cor-texto-azul-claro: #2947C4; --cor-texto-roxo: #6D28D9; }