/* =========================================================================== CASCA DA APLICAÇÃO — Gestão 360 --------------------------------------------------------------------------- O layout é o do sistema de referência (Ref/projetos.html): lateral escura fixa à esquerda, barra superior de 52px, e a página com limite de largura no meio. As medidas de corte da lateral são as mesmas — 1180px ela vira só ícones, 760px ela sai e vira gaveta. Aqui só mora ESTRUTURA e as peças que a primeira tela usa de verdade. Componente que ainda não existe não tem CSS neste arquivo: aba, ficha, linha do tempo e modal de formulário entram quando a tela que os usa entrar. CSS de tela que não existe é CSS que ninguém conserta. Cor, tamanho, espaço e raio vêm todos de tokens.css. Valor cru aqui só aparece onde não existe token: os tons de dentro da lateral escura, que é a única superfície escura do sistema. =========================================================================== */ /* ============================================================ 1. A CASCA ============================================================ */ .app-casca, #casca { display: flex; min-height: 100vh; align-items: stretch; } /* width:100% junto do flex:1 — sem ele um filho sem largura explícita encolhe para o tamanho do conteúdo em vez de ocupar a coluna. */ .conteudo { flex: 1 1 auto; min-width: 0; width: 100%; display: flex; flex-direction: column; align-items: stretch; } .pagina { width: 100%; max-width: var(--content-max); margin: 0 auto; padding: var(--space-6); } /* ============================================================ 2. LATERAL ------------------------------------------------------------ A única superfície escura do sistema: --violet-950 (#230A38), o fundo do roxo da marca. Os tons de texto de dentro dela são valores crus de propósito — não existem tokens para "texto claro sobre roxo escuro", e inventar seis tokens usados num lugar só seria pior. Todos foram medidos: item #B9AEC7 8,48:1 categoria #CFC6DA 10,87:1 grupo #9C8DAF 5,84:1 inerte #8B7BA0 4,64:1 ativo #FFFFFF 17,92:1 ============================================================ */ .lateral { flex: 0 0 var(--sidebar-width); width: var(--sidebar-width); background: var(--violet-950); padding: var(--space-5) 14px var(--space-4); display: flex; flex-direction: column; gap: var(--space-1); position: sticky; top: 0; height: 100vh; overflow: hidden; } /* A marca da lateral: a assinatura da Elaine, na versão "escuro" — o nome do arquivo diz o FUNDO a que ela se destina, não a cor da tinta dela. Abaixo, "Gestão 360" em ouro: a assinatura diz de quem é o sistema, esta linha diz qual sistema é. A assinatura é 640x129 (quase 5:1). Ocupa a largura toda da lateral menos o respiro lateral — é uma peça horizontal e espremê-la a meia largura só a deixaria ilegível sem ganhar nada. */ .lateral__marca { flex: 0 0 auto; padding: 0 10px var(--space-5); display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); text-decoration: none; border-radius: var(--radius); } .lateral__marca img { display: block; width: 100%; height: auto; } .lateral__marca span { font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--gold-300); } .lateral__rolagem { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; margin: 0 -6px; padding: 0 6px; } .lateral__rolagem::-webkit-scrollbar { width: 6px; } .lateral__rolagem::-webkit-scrollbar-thumb { background: #3E2C57; border-radius: 999px; } /* text-decoration:none NÃO é detalhe aqui. Os itens de primeiro nível são de verdade (é o que dá URL a cada tela), e âncora vem sublinhada do navegador. Sem esta linha, Painel, Aplicações e Carteira aparecem com um risco embaixo de cada um — que foi exatamente o que aconteceu quando o menu deixou de ser feito de