/* =================================================================== ESTILO.CSS — TEMA VISUAL DO SISTEMA E-GESTÃO.SEG ------------------------------------------------------------------- Este arquivo define TODA a aparência do sistema: cores, tipografia, modo claro/escuro, cartões, botões, formulários, menu e cabeçalho. Nenhuma cor deve ser escrita "solta" em outros arquivos CSS/HTML — sempre usar as variáveis definidas aqui (ex: var(--cor-primaria)), para que trocar o tema no sistema inteiro seja automático. =================================================================== */ /* ------------------------------------------------------------------- 1. RESET BÁSICO Remove margens/paddings padrão dos navegadores e força todos os elementos a considerar padding/borda dentro da largura definida (box-sizing), evitando caixas que "estouram" o layout. ------------------------------------------------------------------- */ * { margin: 0; padding: 0; box-sizing: border-box; } /* ------------------------------------------------------------------- 2. PALETA DE CORES — MODO CLARO (padrão) Estas são as variáveis oficiais da identidade visual do E-Gestão. No modo claro usamos os tons mais claros da paleta como fundo e os tons mais escuros como texto/contraste. ------------------------------------------------------------------- */ :root { /* --- Cores brutas da paleta oficial (não usar direto, usar as semânticas abaixo) --- */ --azul-escuro: #003366; --azul-medio-1: #2B5885; --azul-medio-2: #4F8AC5; --azul-medio-claro: #9ABCDE; --azul-claro: #CADCEE; --azul-clarinho: #DDEBF7; --branco: #FFFFFF; --vermelho: #800000; --verde: #006600; --amarelo: #DEA900; --verde-claro: #00CC99; --verde-agua: #00FFCC; --verde-clarinho: #99FFCC; /* --- Variáveis semânticas (o resto do CSS usa estas) --- */ --cor-fundo: var(--azul-clarinho); /* fundo geral da página — tom pastel de azul */ --cor-fundo-degrade: var(--azul-claro); /* segunda cor do degradê de fundo, também pastel */ --cor-superficie: rgba(255, 255, 255, 0.65);/* fundo dos cartões/painéis (efeito vidro) — branco translúcido sobre o azul pastel */ --cor-superficie-solida: var(--branco); /* fundo sólido, sem transparência (ex: campos de formulário) */ --cor-borda: var(--azul-medio-claro); /* linhas e contornos sutis */ --cor-texto: var(--azul-escuro); /* texto principal */ --cor-texto-suave: var(--azul-medio-1); /* texto secundário, menos importante */ --cor-primaria: var(--azul-medio-1); /* cor de destaque principal (botões, links, ícones ativos) */ --cor-primaria-hover: var(--azul-escuro); /* cor ao passar o mouse sobre elementos primários */ --cor-destaque: var(--azul-medio-2); /* cor de apoio, usada em gráficos e realces */ --cor-sucesso: var(--verde); /* confirmações, status "ativo" */ --cor-erro: var(--vermelho); /* erros, exclusões, bloqueios */ --cor-alerta: var(--amarelo); /* avisos, pendências */ --sombra-cartao: 0 8px 24px rgba(0, 51, 102, 0.14); /* sombra suave dos cartões, dá profundidade */ --brilho-vidro: rgba(255, 255, 255, 0.4); /* reflexo usado na borda superior dos cartões de vidro */ } /* ------------------------------------------------------------------- 3. PALETA DE CORES — MODO ESCURO Ativado quando a tag recebe o atributo data-theme="dark" (isso é trocado via JavaScript quando o usuário clica no botão de tema). Aqui usamos os tons mais escuros da paleta como fundo. ------------------------------------------------------------------- */ [data-theme="dark"] { --cor-fundo: #001a33; /* mais escuro que azul-escuro, dá profundidade ao degradê */ --cor-fundo-degrade: var(--azul-escuro); --cor-superficie: rgba(43, 88, 133, 0.35); /* "vidro" escuro semi-transparente, efeito glassmorphism */ --cor-superficie-solida: #0a2a4a; --cor-borda: rgba(154, 188, 222, 0.25); --cor-texto: var(--azul-clarinho); --cor-texto-suave: var(--azul-medio-claro); --cor-primaria: var(--azul-medio-2); --cor-primaria-hover: var(--verde-agua); /* realce vibrante no hover, remete ao mockup de referência */ --cor-destaque: var(--verde-agua); --cor-sucesso: var(--verde-claro); --cor-erro: #c0392b; /* vermelho um pouco mais claro para contrastar no fundo escuro */ --cor-alerta: var(--amarelo); --sombra-cartao: 0 8px 32px rgba(0, 0, 0, 0.45); --brilho-vidro: rgba(255, 255, 255, 0.08); } /* ------------------------------------------------------------------- 4. BASE DA PÁGINA Fundo em degradê suave (dá o efeito "profissional", não é uma cor chapada), fonte padrão do sistema, transição suave ao trocar tema. ------------------------------------------------------------------- */ html, body { height: 100%; } body { font-family: 'Segoe UI', Tahoma, Verdana, Arial, sans-serif; color: var(--cor-texto); background: linear-gradient(160deg, var(--cor-fundo) 0%, var(--cor-fundo-degrade) 100%); min-height: 100vh; transition: background 0.3s ease, color 0.3s ease; /* troca de tema fica suave, não "pisca" */ } /* Todo texto de interface (botões, menus, abas, rótulos) fica em caixa alta automaticamente via CSS — nunca digitar em maiúsculas no dado/JS. */ button, .botao, nav a, .menu-lateral a, .faixa-superior .titulo-sistema, label, .abas a, th { text-transform: uppercase; letter-spacing: 0.03em; /* pequeno espaçamento deixa o caixa-alta mais legível */ } /* ------------------------------------------------------------------- 5. CARTÕES / PAINÉIS (efeito "vidro" — glassmorphism) Usado em: caixa de login, cards do painel, blocos de formulário. O efeito de vidro vem do fundo semi-transparente + desfoque do que está atrás (backdrop-filter) + uma borda clara sutil no topo. ------------------------------------------------------------------- */ .cartao { background: var(--cor-superficie); border: 1px solid var(--cor-borda); border-top: 1px solid var(--brilho-vidro); border-radius: 16px; box-shadow: var(--sombra-cartao); backdrop-filter: blur(12px); /* desfoca o fundo por trás do cartão */ -webkit-backdrop-filter: blur(12px); padding: 32px; /* Se o conteúdo for mais largo que o cartão (ex: tabela com muitas colunas em uma tela de celular), rola por dentro do cartão em vez de estourar a largura da página. */ overflow-x: auto; } /* ------------------------------------------------------------------- 6. BOTÕES Um botão base (.botao) + variações de cor semântica. O texto já sai em caixa alta pela regra da seção 4. ------------------------------------------------------------------- */ .botao { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 24px; /* Toda variação de botão tem borda transparente do mesmo tamanho — assim nenhum botão fica mais alto/baixo que outro dependendo da variação (se só alguns tivessem borda, ficariam com alturas diferentes lado a lado). */ border: 1.5px solid transparent; border-radius: 10px; font-weight: 600; font-size: 0.9rem; cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease; color: var(--branco); background: var(--cor-primaria); box-shadow: 0 4px 14px rgba(0, 51, 102, 0.25); /* Alguns botões são links (), que os navegadores sublinham por padrão. Isso é removido aqui para todo botão ficar só em caixa alta, sem risco por baixo do texto — e sem essa diferença de altura entre um botão link e um botão de verdade (