/* ============================================================================ JSF-CONNECTOR — Sistema de design "malha de sinal" (#332) Direção visual: trilhas de cobre + telemetria de sinal sobre a stack Django. Paleta cobre (--accent) + sinal (--signal), tipografia Bahnschrift (display) e monoespaçada (IDs/timestamps/status). Tokens abaixo são a fonte única de verdade das cores/tipografia; os seletores consomem via var(). Esboço de referência em docs/proposta-design-visual.html. Tema claro apenas (color-scheme: light) — o app tem muitos estilos inline herdados de telas antigas; um dark-mode global viria depois, quando esses estiverem todos tokenizados. ============================================================================ */ :root { --canvas:#F4F5F0; --panel:#FFFFFF; --panel-2:#FAFAF7; --text:#12201A; --text-muted:#5B6B64; --border:#DDE1D7; --border-strong:#C7CDC2; --sidebar-bg:#0A1512; --sidebar-fg:#C9D6CF; --sidebar-fg-dim:#71877C; --sidebar-border:#1B2C25; --accent:#B5651D; --accent-strong:#8F4E14; --accent-on-dark:#E39A57; --signal:#2FA99A; --signal-on-dark:#5EEAD4; --ok:#2F7A3C; --ok-bg:#E4F1E3; --warn:#96650F; --warn-bg:#F5EBD3; --err:#B33A3A; --err-bg:#F6E1E1; --info:#1A56DB; --info-bg:#E8F0FE; /* #348: cores por tipo de nó do editor de fluxo (antes hex solto no flow.css). Tons médios que funcionam sobre fundo claro e escuro; o #349 os reajusta no tema escuro. --node-accent é o realce interativo do editor (foco, botões auxiliares) alinhado ao "sinal" do design system. */ --node-accent:#2FA99A; --node-accent-bg:#E4F5F2; --node-accent-border:#A9DED7; --node-trigger:#34A853; --node-api:#3B7DD8; --node-http:#9C27B0; --node-logic:#C79212; --node-delay:#00ACC1; --node-loop:#E4703A; --node-estado:#C2185B; /* #505: nó "Máquina de Estado" */ --node-ia:#6A4CFF; /* #535: nó "IA / LLM" */ --node-email:#1E88A8; /* #568: nó "E-mail" */ --node-subfluxo:#5C6BC0; /* #598: nó "Subfluxo" */ --shadow: 0 1px 2px rgba(16,32,26,.06), 0 8px 24px -12px rgba(16,32,26,.18); --radius-s:3px; --radius-m:5px; --font-display:"Bahnschrift","Arial Narrow","Segoe UI Semibold","Segoe UI",sans-serif; --font-body:-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial,sans-serif; --font-mono:"Cascadia Code","Cascadia Mono","SF Mono","JetBrains Mono","Fira Code",Consolas,"Roboto Mono",monospace; color-scheme: light; } /* ============================================================================ #349 — Tema escuro Tokens escuros portados do mockup docs/proposta-design-visual.html. Dois gatilhos: (1) preferência do SO (prefers-color-scheme: dark) quando o usuário NÃO forçou um tema (:not([data-theme="light"])); (2) escolha explícita data-theme="dark" (toggle no header, persistido em localStorage e aplicado antes do paint por um script inline no do base.html — sem flash). data-theme="light" força o claro mesmo com SO escuro. A sidebar/header permanecem escuros nos dois temas (já são a superfície mais escura). Os --node-* mantêm o matiz por tipo; só ajustamos os que precisavam de brilho. ============================================================================ */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --canvas:#0D1815; --panel:#122019; --panel-2:#0F1B17; --text:#E7EEE9; --text-muted:#8FA39A; --border:#22332B; --border-strong:#2E4238; --accent:#E39A57; --accent-strong:#F2AE6E; --signal:#5EEAD4; --ok:#6FCB7F; --ok-bg:#123821; --warn:#E8B339; --warn-bg:#3A2C0E; --err:#F1666B; --err-bg:#3B1414; --info:#7CA6F0; --info-bg:#16233F; --node-accent:#5EEAD4; --node-accent-bg:#12312C; --node-accent-border:#2C5A52; --node-api:#5B92E0; --node-logic:#E8B339; --shadow: 0 1px 2px rgba(0,0,0,.4), 0 12px 28px -14px rgba(0,0,0,.6); color-scheme: dark; } } :root[data-theme="dark"] { --canvas:#0D1815; --panel:#122019; --panel-2:#0F1B17; --text:#E7EEE9; --text-muted:#8FA39A; --border:#22332B; --border-strong:#2E4238; --accent:#E39A57; --accent-strong:#F2AE6E; --signal:#5EEAD4; --ok:#6FCB7F; --ok-bg:#123821; --warn:#E8B339; --warn-bg:#3A2C0E; --err:#F1666B; --err-bg:#3B1414; --info:#7CA6F0; --info-bg:#16233F; --node-accent:#5EEAD4; --node-accent-bg:#12312C; --node-accent-border:#2C5A52; --node-api:#5B92E0; --node-logic:#E8B339; --shadow: 0 1px 2px rgba(0,0,0,.4), 0 12px 28px -14px rgba(0,0,0,.6); color-scheme: dark; } /* ============================================================================ #530 — Identificação visual de ambiente (selo no cabeçalho, base.html) Sandbox ganha um bloco de tokens PRÓPRIO (paleta laranja vibrante, distinta do --accent cobre padrão) sob o atributo [data-ambiente='sandbox'] setado no por core.context_processors.ambiente_context -- mesmo mecanismo de variante clara/escura já usado pelo tema acima. Produção reaproveita o --info já existente (sem token novo). #537: 'local' ganhou o mesmo tratamento de Sandbox, com paleta rosa/roxo própria (--env-local/ --env-local-fg) -- só 'production' segue sem bloco de tokens dedicado aqui (reaproveita --info). ============================================================================ */ html[data-ambiente="sandbox"] { --env-sandbox:#FF6A00; --env-sandbox-fg:#12201A; } @media (prefers-color-scheme: dark) { html[data-ambiente="sandbox"]:not([data-theme="light"]) { --env-sandbox:#FF9142; --env-sandbox-fg:#12201A; } } html[data-ambiente="sandbox"][data-theme="dark"] { --env-sandbox:#FF9142; --env-sandbox-fg:#12201A; } /* #537 — paleta rosa/roxo própria do ambiente 'local' (default de ENVIRONMENT quando ausente, #530), distinta de --accent/--env-sandbox/--info. Mesma estrutura clara/escura acima (SO via prefers-color-scheme + toggle explícito via data-theme="dark"). */ html[data-ambiente="local"] { --env-local:#9B2FBF; --env-local-fg:#FFFFFF; } @media (prefers-color-scheme: dark) { html[data-ambiente="local"]:not([data-theme="light"]) { --env-local:#D17EF0; --env-local-fg:#2B0A3D; } } html[data-ambiente="local"][data-theme="dark"] { --env-local:#D17EF0; --env-local-fg:#2B0A3D; } * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: var(--font-body); background: var(--canvas); color: var(--text); } /* #306: skip-link -- fora da tela até receber foco por teclado (Tab), aí salta para o topo e fica visível o suficiente para ler e ativar (Enter). */ .skip-link { position: absolute; top: -3rem; left: .5rem; z-index: 1000; background: var(--sidebar-bg); color: #fff; padding: .65rem 1rem; border-radius: var(--radius-s); text-decoration: none; font-size: .9rem; transition: top .15s; } .skip-link:focus { top: .5rem; outline: 2px solid var(--signal); outline-offset: 2px; } header { background: var(--sidebar-bg); color: #fff; padding: 1rem 2rem; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--sidebar-border); } header .header-brand { display: flex; align-items: center; gap: 1rem; } header .logo { height: 60px; width: auto; border-radius: 6px; } header .company-name { font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; letter-spacing: 0.04em; color: #fff; } /* #530: selo de ambiente ao lado do nome da empresa -- header é sempre escuro (--sidebar-bg) nos dois temas, por isso as duas variantes usam fundo sólido (não o padrão --info-bg/tint, pensado para painéis claros). */ .env-badge { display: inline-block; margin-left: .7rem; padding: .15rem .6rem; border-radius: 999px; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; vertical-align: middle; } .env-badge-production { background: var(--info); color: #fff; } .env-badge-sandbox { background: var(--env-sandbox); color: var(--env-sandbox-fg); } .env-badge-local { background: var(--env-local); color: var(--env-local-fg); } header nav a { color: #fff; text-decoration: none; } main { padding: 0; } /* #540: rodapé simples "Powered by JS Financial Systems" -- JSF-CONNECTOR tem identidade visual própria como produto (logo dedicado), mantendo o vínculo visível com a JSFS como mantenedora. */ .app-footer { padding: 1rem 2rem; text-align: center; border-top: 1px solid var(--border); } .app-footer a { color: var(--text-muted); text-decoration: none; font-size: .8rem; } .app-footer a:hover { text-decoration: underline; } /* #647: versão do sistema (settings.APP_VERSION), ao lado do "Powered by" -- discreta (mesmo tom apagado de .app-footer a), sem virar link. */ .app-footer-version { color: var(--text-muted); font-size: .8rem; margin-left: .5rem; } /* Mensagens globais (django.contrib.messages) */ .messages-bar { padding: .5rem 2rem; } .alert { padding: .65rem 1rem; border-radius: var(--radius-s); font-size: .9rem; margin-bottom: .4rem; } .alert-error, .alert.error { background: var(--err-bg); color: var(--err); border: 1px solid var(--err); } .alert-success, .alert.success { background: var(--ok-bg); color: var(--ok); border: 1px solid var(--ok); } .alert-info, .alert.info { background: var(--info-bg); color: var(--info); border: 1px solid var(--info); } /* Dashboard layout */ .dashboard-layout { display: flex; min-height: calc(100vh - 78px); } .sidebar { width: 220px; background: var(--sidebar-bg); color: var(--sidebar-fg); padding: 1.25rem 0; flex-shrink: 0; border-right: 1px solid var(--sidebar-border); } .sidebar-nav ul { list-style: none; } .sidebar-nav ul li a, .sidebar-module { display: block; padding: 0.6rem 1.25rem; color: var(--sidebar-fg); text-decoration: none; font-size: 0.92rem; border-left: 3px solid transparent; transition: background 0.15s; } .sidebar-module { cursor: default; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sidebar-fg-dim); } .sidebar-nav ul li a:hover { background: #152720; color: #fff; } .sidebar-nav ul li a.active { background: #17281F; color: #fff; border-left-color: var(--accent-on-dark); } .sidebar-submenu { display: none; list-style: none; } .sidebar-submenu.open { display: block; } .sidebar-submenu li a { padding: 0.5rem 1.25rem 0.5rem 2.25rem; font-size: 0.86rem; color: var(--sidebar-fg); border-left: 3px solid transparent; } .sidebar-submenu li a:hover { background: #152720; color: #fff; } .sidebar-submenu li a.active { color: #fff; border-left-color: var(--accent-on-dark); background: #17281F; } .dashboard-content { flex: 1; padding: 2rem; background: var(--canvas); } .card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-m); padding: 1.5rem; margin-bottom: 1.5rem; box-shadow: var(--shadow); } .card h3 { font-family: var(--font-display); font-weight: 700; letter-spacing: .01em; color: var(--text); margin-bottom: 1rem; } .card p { margin-bottom: 0.4rem; } .card-section { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--border); } .card-section strong { display: block; margin-bottom: 0.6rem; color: var(--text); } .user-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; } .user-table th { text-align: left; padding: 0.55rem 0.75rem; background: var(--panel-2); color: var(--text-muted); font-family: var(--font-mono); font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; border-bottom: 1px solid var(--border); } .user-table th a { color: inherit; text-decoration: none; } .user-table th a:hover { text-decoration: underline; } .user-table td { padding: 0.55rem 0.75rem; border-top: 1px solid var(--border); } /* #305: "Excluir" agora é um