/* Estilo do protótipo RAF — GOSC Cores/tipografia conforme 09-identidade-visual-gosc.md (rascunho, ver P-17/P-19) */ @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap'); :root { --azul-petroleo: #004665; --azul-petroleo-claro: #0E5572; --fundo-claro: #F8FDFF; --borda: #d7e7ee; --texto-secundario: #5b7480; --cor-superficie: #FFFFFF; --cor-texto: #1a1a1a; --cor-fundo-sutil: #eef7fb; --cor-titulo: var(--azul-petroleo); --anel-foco: rgba(14,85,114,.12); } /* Modo escuro — ativado via data-theme="dark" no (ver public/js/tema.js). A barra do header mantém o azul-petroleo em ambos os temas (é a cor da marca); só a área de conteúdo (fundo, cards, tabelas, texto) troca. */ [data-theme="dark"] { --fundo-claro: #123240; --borda: #1E3F4A; --texto-secundario: #8FB0BA; --azul-petroleo-claro: #4FB3D9; --cor-superficie: #0F2933; --cor-texto: #EAF6FA; --cor-fundo-sutil: #163444; --cor-titulo: #4FB3D9; --anel-foco: rgba(79,179,217,.18); } * { box-sizing: border-box; } body { font-family: 'Montserrat', -apple-system, "Segoe UI", Arial, sans-serif; background: var(--fundo-claro); color: var(--cor-texto); margin: 0; display: flex; flex-direction: column; min-height: 100vh; transition: background .2s ease, color .2s ease; } header { background: var(--azul-petroleo); color: #fff; padding: 18px 28px; display: flex; justify-content: space-between; align-items: center; box-shadow: 0 2px 6px rgba(0,0,0,0.12); flex-wrap: wrap; gap: 12px; } .marca { display: flex; align-items: center; gap: 16px; } .marca-logo { width: 56px; height: 56px; display: block; flex-shrink: 0; } .marca strong, .marca > div:not(.marca-logo) { font-size: 20px; font-weight: 700; letter-spacing: 0.3px; } header .marca span { font-size: 12px; font-weight: 400; opacity: 0.85; display: block; letter-spacing: 0.2px; } header nav { display: flex; align-items: center; flex-wrap: wrap; } header nav a, header nav span { color: #fff; margin-left: 18px; text-decoration: none; font-size: 14px; } header nav a { font-weight: 500; opacity: 0.85; transition: opacity .15s ease, background .15s ease; } header nav a:hover { opacity: 1; text-decoration: underline; } .user-info { display: flex; align-items: center; gap: 10px; } .user-info > span { margin-left: 0; } .avatar { width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; background: rgba(255,255,255,.18); display: flex; align-items: center; justify-content: center; font-size: 12.5px; font-weight: 700; color: #fff; } .papel-badge { background: rgba(255,255,255,.15); padding: 2px 9px; border-radius: 10px; font-size: 11.5px; font-weight: 600; margin-left: 4px; } .icon-link { display: inline-flex !important; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 8px; } .icon-link:hover { background: rgba(255,255,255,.12); text-decoration: none !important; } .icon-link svg { flex-shrink: 0; } .icon-link-sair:hover { background: rgba(248,207,207,.18); } /* Botão de alternância de tema dentro do header (é um