/* ===================================================================== Omega — estilo único dos sistemas Opção B "Claro moderno", escolhida pelo Lucas em 24/09/2026. Base: tema "Classic blue and dark" da 21st.dev, com o azul do site da Omega. ARQUIVO CANÔNICO: C:\Users\lucas\dev\omega-estilo\omega-tema.css A cópia dentro de cada sistema é gerada por `node sincronizar.js` — nunca editar a cópia: editar aqui, sincronizar, commitar e publicar cada um. Carregar ANTES do CSS do sistema. O sistema não redefine cor, fonte, raio nem sombra: só usa estas variáveis. ===================================================================== */ @font-face { font-family: "Outfit"; src: url("fontes/outfit-latin.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { --fonte: "Outfit", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --fundo: #fcfcfc; --superficie: #ffffff; --superficie-2: #f5f6f8; --superficie-3: #eceef1; --borda: #e6e6e6; --borda-forte: #d2d2d2; --texto: #171717; --texto-2: #525252; --texto-3: #737373; --destaque: #0034b0; --destaque-forte: #00268a; --destaque-suave: #eaf0ff; --destaque-contraste: #ffffff; --verde: #15803d; --verde-suave: #dcfce7; --vermelho: #b91c1c; --vermelho-suave: #fee2e2; --ambar: #b45309; --ambar-suave: #fef3c7; --azul-info: #0369a1; --azul-info-suave: #e0f2fe; --raio: 12px; --raio-m: 10px; --raio-p: 8px; --sombra: 0 1px 3px rgba(0, 0, 0, 0.08); --sombra-alta: 0 12px 32px -8px rgba(0, 0, 0, 0.22); --anel: 0 0 0 3px rgba(0, 52, 176, 0.3); color-scheme: light; } @media (prefers-color-scheme: dark) { :root { --fundo: #131313; --superficie: #1b1b1b; --superficie-2: #212121; --superficie-3: #292929; --borda: #2a2a2a; --borda-forte: #3a3a3a; --texto: #ececec; --texto-2: #b5b5b5; --texto-3: #8a8a8a; --destaque: #3d7bff; --destaque-forte: #6b9bff; --destaque-suave: #1b2640; --destaque-contraste: #ffffff; --verde: #4ade80; --verde-suave: rgba(34, 197, 94, 0.15); --vermelho: #f87171; --vermelho-suave: rgba(239, 68, 68, 0.15); --ambar: #fbbf24; --ambar-suave: rgba(245, 158, 11, 0.15); --azul-info: #7dd3fc; --azul-info-suave: rgba(14, 165, 233, 0.15); --sombra: 0 4px 12px -1px rgba(0, 0, 0, 0.5); --sombra-alta: 0 14px 36px rgba(0, 0, 0, 0.6); --anel: 0 0 0 3px rgba(61, 123, 255, 0.4); color-scheme: dark; } } /* --------------------------------------------------------------------- Botão principal — animação "brilho": uma faixa de luz atravessa e o botão sobe 2 px. Quem recebe (um seletor por sistema): .om-brilho genérico (ERP e o que vier) .botao-primario Financeiro .primario CRM (button.primario / .botao.primario) .botao:not(.claro) Devoluções (só com data-sistema="devolucoes" no , porque o Financeiro também usa a classe .botao) --------------------------------------------------------------------- */ .om-brilho, .botao-primario, button.primario, .botao.primario, [data-sistema="devolucoes"] .botao:not(.claro) { position: relative; overflow: hidden; isolation: isolate; } .om-brilho::after, .botao-primario::after, button.primario::after, .botao.primario::after, [data-sistema="devolucoes"] .botao:not(.claro)::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.38), transparent); transform: skewX(-18deg); pointer-events: none; z-index: 1; } @media (prefers-reduced-motion: no-preference) { .om-brilho, .botao-primario, button.primario, .botao.primario, [data-sistema="devolucoes"] .botao:not(.claro) { transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease; } .om-brilho::after, .botao-primario::after, button.primario::after, .botao.primario::after, [data-sistema="devolucoes"] .botao:not(.claro)::after { transition: left 0.55s ease; } :is(.om-brilho, .botao-primario, button.primario, .botao.primario, [data-sistema="devolucoes"] .botao:not(.claro)):hover:not(:disabled)::after { left: 120%; } :is(.om-brilho, .botao-primario, button.primario, .botao.primario, [data-sistema="devolucoes"] .botao:not(.claro)):hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 8px 18px -8px var(--destaque); } :is(.om-brilho, .botao-primario, button.primario, .botao.primario, [data-sistema="devolucoes"] .botao:not(.claro)):active:not(:disabled) { transform: translateY(0); box-shadow: none; } }