:root { --color-bg: #F4F6FB; --color-surface: #ffffff; --color-surface-2: #ECEFF7; --color-border: #DDE1EE; --color-border-soft: #E7E9F2; --color-text: #0B1233; --color-text-muted: #5C6280; --color-nav-bg: #181819; --color-nav-text: #9AA1C4; --color-nav-text-active: #ffffff; /* Sidebar clara (08/09/2026, pedido do Caio) -- referenciam os tokens de superfície/texto normais, então já se adaptam sozinhos no dark mode sem precisar redefinir de novo lá embaixo. --color-nav-* acima ficou só pro fundo escuro da tela de login, que continua como estava. */ --color-sidebar-bg: var(--color-surface); --color-sidebar-border: var(--color-border); --color-sidebar-text: var(--color-text-muted); --color-sidebar-text-hover: var(--color-text); /* Paleta oficial AuxFlow (13/09/2026, substitui a versão de 09/09): blanco #F6F6F6, ciano #39C6F7, purple #545EE5, nocturne sea #262C66, solid grey #181819. Roxo (purple) continua a cor de interação principal (link, foco, botão) -- contraste real ~5.1:1 sobre fundo branco; ciano sozinho não passa nem de AA como texto (~2:1), fica reservado pra gradiente/decoração, nunca como cor de texto. */ --color-accent: #545EE5; --color-accent-hover: #3F47C4; --color-accent-soft: #E9EAFC; --color-accent-2: #39C6F7; /* Só pro fundo de botão -- ver .btn-primary. */ --color-accent-btn: #4750C3; --gradient-accent: linear-gradient(120deg, #545EE5 0%, #39C6F7 100%); --color-success: #1F9D6B; --color-success-bg: #E4F7EF; --color-warning: #B67F14; --color-warning-bg: #FBF0DA; --color-danger: #C13F5B; --color-danger-bg: #FBE7EC; --color-neutral: #5C6280; --color-neutral-bg: #ECEFF7; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --shadow-sm: 0 1px 2px rgba(11, 18, 51, 0.05), 0 1px 1px rgba(11, 18, 51, 0.04); --shadow-md: 0 8px 24px rgba(11, 18, 51, 0.12); --shadow-lg: 0 24px 60px rgba(7, 11, 31, 0.25); --font-display: "Sora", "Inter", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-sans: "Inter", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace; } /* Toggle manual de tema (13/09/2026, pedido do Caio, botão na topbar) -- [data-theme] no vence a preferência do sistema nos dois sentidos. Sem escolha explícita (sem atributo), continua seguindo prefers-color-scheme como sempre -- por isso o media query abaixo usa :not([data-theme="light"]) em vez de aplicar sempre: uma escolha explícita de "claro" não pode perder pro sistema estar em modo escuro. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { /* Cinza neutro (13/09/2026, pedido do Caio) -- antes era um azul-marinho escuro (#0D1024/#151832), fora da paleta oficial de 5 cores. Agora parte do "solid grey" oficial (#181819) pro fundo, sem tingir de azul -- só os acentos (purple/ciano) carregam cor. */ --color-bg: #141415; --color-surface: #1D1D1F; --color-surface-2: #26262A; --color-border: #38383C; --color-border-soft: #2C2C30; --color-text: #F6F6F6; --color-text-muted: #A3A3A8; --color-nav-bg: #181819; --color-nav-text: #9C9CA3; --color-nav-text-active: #ffffff; /* Mesma paleta oficial, clareada pra contraste em fundo escuro -- purple puro (modo claro, #545EE5) fica escuro demais aqui. #9AA0F5 dá ~7:1 sobre --color-surface (#1D1D1F). */ --color-accent: #9AA0F5; --color-accent-hover: #B4B9F9; --color-accent-soft: #2A2A35; --color-accent-2: #5BD3FA; --gradient-accent: linear-gradient(120deg, #9AA0F5 0%, #5BD3FA 100%); --color-success: #4FCB93; --color-success-bg: #1C2E26; --color-warning: #E3BA5C; --color-warning-bg: #2E2717; --color-danger: #E88DA3; --color-danger-bg: #2E1F24; --color-neutral: #A3A3A8; --color-neutral-bg: #26262A; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 1px rgba(0, 0, 0, 0.25); --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.5); } } /* Repete os mesmos valores escuros aqui fora do media query -- escolha explícita de "escuro" precisa vencer mesmo com o sistema em modo claro (o bloco acima só responde a prefers-color-scheme, não a este atributo). */ :root[data-theme="dark"] { --color-bg: #141415; --color-surface: #1D1D1F; --color-surface-2: #26262A; --color-border: #38383C; --color-border-soft: #2C2C30; --color-text: #F6F6F6; --color-text-muted: #A3A3A8; --color-nav-bg: #181819; --color-nav-text: #9C9CA3; --color-nav-text-active: #ffffff; --color-accent: #9AA0F5; --color-accent-hover: #B4B9F9; --color-accent-soft: #2A2A35; --color-accent-2: #5BD3FA; --gradient-accent: linear-gradient(120deg, #9AA0F5 0%, #5BD3FA 100%); --color-success: #4FCB93; --color-success-bg: #1C2E26; --color-warning: #E3BA5C; --color-warning-bg: #2E2717; --color-danger: #E88DA3; --color-danger-bg: #2E1F24; --color-neutral: #A3A3A8; --color-neutral-bg: #26262A; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 1px rgba(0, 0, 0, 0.25); --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.5); } * { box-sizing: border-box; } @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } } html, body { margin: 0; padding: 0; height: 100%; font-family: var(--font-sans); background: var(--color-bg); color: var(--color-text); -webkit-font-smoothing: antialiased; } #app { height: 100%; } .hidden { display: none !important; } /* ---------- Login ---------- */ .login-screen { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; /* Sem glow decorativo (13/09/2026, pedido do Caio) -- fundo chapado. */ background: var(--color-nav-bg); } /* Sem card branco (13/09/2026, pedido do Caio) -- a tela de login vira uma vitrine fixa sempre escura, igual a landing, em vez de seguir o tema claro/escuro do sistema como o resto do app. Os campos ficam direto no fundo de --login-screen; .login-card só organiza o layout (largura/padding), sem superfície própria. */ .login-card { width: 100%; max-width: 380px; background: transparent; border: none; box-shadow: none; padding: 8px 8px 0; } .login-brand { flex-direction: column; justify-content: center; gap: 8px; margin-bottom: 30px; } .login-logo { width: 100%; max-width: 220px; height: auto; display: block; margin: 0 auto; } /* Campos, rótulos, link e aviso: cores fixas claras (não var(--color-*), que segue o tema do sistema) -- este fundo é sempre escuro, então o conteúdo tem que ser sempre claro, independente do modo do sistema. */ .login-screen .field label { color: #F6F6F6; } .login-screen .field input { background: rgba(246,246,246,.06); border-color: rgba(246,246,246,.2); color: #F6F6F6; } .login-screen .field input::placeholder { color: rgba(246,246,246,.4); } .login-screen .field input:focus { border-color: #39C6F7; box-shadow: 0 0 0 3px rgba(57,198,247,.25); } .login-screen .login-link-secundario { color: rgba(246,246,246,.55); } .login-screen .toggle-senha { color: rgba(246,246,246,.55); } .login-screen .toggle-senha:hover { color: #F6F6F6; } .login-screen .form-error { background: rgba(200,60,80,.18); color: #F5AAB9; } /* Campos mais compactos (13/09/2026, "os formulários ainda estão muito grandes") -- só na tela de login, não mexe no resto do app. */ .login-screen .login-card { max-width: 340px; } .login-screen .field { margin-bottom: 12px; } .login-screen .field input { padding: 8px 10px; font-size: 13.5px; } .login-screen .campo-senha input { padding-right: 38px; } .login-screen .field label { font-size: 12.5px; margin-bottom: 5px; } .login-screen .toggle-senha { width: 28px; height: 28px; } .login-screen .toggle-senha svg { width: 16px; height: 16px; } /* "Esqueci minha senha" sai de baixo do botão "Entrar" e vai pra logo abaixo do campo de senha (13/09/2026, pedido do Caio) -- ver o HTML, o link entrou dentro do
, antes do botão. Cola direto no campo (margin-top pequeno) e o botão ganha respiro acima pra compensar. */ .login-screen .field + .login-link-secundario { margin: -4px 0 38px; text-align: left; font-size: 12.5px; } /* ---------- Animação de entrada (09/09/2026, revisada 13/09/2026 até virar um morph lento e único com a saída da landing) ---------- */ /* Continuação da transição que já começou na landing (o "Entrar" converge tudo no círculo do favicon, ver landing/index.html .veil-saida) -- o círculo aqui nasce do MESMO tamanho (80px) que o da landing termina, sem bounce nem anel pulsando (dois efeitos de entrada competindo lia como redundante). "Abrir" agora é mais lento e mais expansivo (scale 2.4, não 1.18) -- pedido do Caio: mais devagar = mais qualidade. */ .intro-animation { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; background: var(--color-nav-bg); z-index: 50; opacity: 1; transition: opacity .7s cubic-bezier(.65,0,.35,1); } .intro-animation.intro-fade-out { opacity: 0; pointer-events: none; } .intro-animation.intro-fade-out .intro-logo-wrap { transform: scale(2.4); transition: transform .8s cubic-bezier(.22,.61,.36,1); } .intro-logo-wrap { position: relative; width: 80px; height: 80px; } .intro-logo { position: relative; width: 100%; height: 100%; /* Sem quadrado branco (13/09/2026, pedido do Caio) -- a marca nova já tem contraste de sobra direto no fundo escuro do splash (mesma lógica do card da landing e do login), o badge branco era resquício de quando o ícone antigo precisava dele. object-fit:contain continua necessário -- a marca não é quadrada como o ícone antigo era. */ object-fit: contain; } .login-card.login-card-enter { opacity: 0; transform: translateY(14px) scale(.97); } .login-card.login-card-enter-active { opacity: 1; transform: none; /* Duração alinhada com o círculo abrindo (.intro-fade-out .intro-logo-wrap, 800ms) -- 13/09/2026, formulário e círculo terminam juntos. */ transition: opacity .8s ease, transform .8s cubic-bezier(.22, .61, .36, 1); } @media (prefers-reduced-motion: reduce) { .intro-logo, .intro-tagline { animation: none; opacity: 1; transform: none; } .intro-animation.intro-fade-out .intro-logo-wrap { transition: none; } .login-card.login-card-enter, .login-card.login-card-enter-active { opacity: 1; transform: none; transition: none; } .intro-animation { transition: none; } } .field { margin-bottom: 16px; } .field label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; color: var(--color-text); } .field input, .field select { width: 100%; padding: 10px 12px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-size: 14px; font-family: inherit; background: var(--color-surface); color: var(--color-text); } .field input:focus, .field select:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-accent-soft); } /* Olhinho de mostrar/ocultar senha (13/09/2026, pedido do Caio). */ .campo-senha { position: relative; } .campo-senha input { padding-right: 40px; } .toggle-senha { position: absolute; top: 50%; right: 4px; transform: translateY(-50%); width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; background: none; border: none; padding: 0; cursor: pointer; color: var(--color-text-muted); border-radius: var(--radius-sm); } .toggle-senha:hover { color: var(--color-text); } .toggle-senha svg { width: 18px; height: 18px; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 16px; border-radius: var(--radius-sm); border: 1px solid transparent; font-size: 14px; font-weight: 600; font-family: inherit; cursor: pointer; transition: background-color .15s ease, border-color .15s ease, filter .15s ease; } /* Cor sólida, não o gradiente roxo->ciano (13/09/2026, "os botões estão muito fortes") -- um gradiente vibrante em CADA botão da aplicação (toda ação, toda tela) competia por atenção demais pro uso do dia a dia. O gradiente (--gradient-accent) fica reservado pra momento único (ex.: título da landing), não repetido em todo canto. */ /* Um pouco mais escuro que --color-accent puro (13/09/2026, "cor do botão um pouco mais escuro" -- achado real no caminho: reduzir só a luminosidade em HSL deixava o roxo puxando muito pro azul; multiplicar o RGB direto por 0.85 preserva a matiz e escurece igual). Só no modo claro: no escuro, --color-accent (#9AA0F5) já é claro de propósito (é cor de TEXTO sobre fundo escuro, ver comentário lá em cima) -- escurecer ele quebraria o contraste do texto branco em cima do próprio botão (caía de ~7:1 pra menos de 4:1). */ .btn-primary { background: var(--color-accent-btn, var(--color-accent)); color: #fff; width: 100%; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12); } .btn-primary:hover { background: var(--color-accent-hover); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18); transform: translateY(-1px); } .btn-primary:active { transform: translateY(0); } /* Achado real (10/09/2026): o width:100% acima é pro botão de formulário (login, salvar em modal) -- os "+ Novo..." de cabeçalho de painel usavam a mesma classe com padding/font-size menores só no style inline, mas o width:100% nunca era desfeito, então o botão ficava enorme (ocupando a linha toda do panel-header) com o texto pequeno perdido dentro. */ .btn-primary-sm { width: auto; padding: 7px 14px; font-size: 13px; } /* Genérico pra qualquer variante de botão (13/09/2026, toolbar do construtor de fluxo) -- .btn-primary-sm acima só existe pra primary (nome já diz), mas o pedido foi diminuir TODOS os botões da barra (inclusive os secondary de "Fluxos"/"Rodar agora"). */ .btn-sm { width: auto; padding: 6px 12px; font-size: 12.5px; } /* Botão quadrado só com ícone (13/09/2026, toggle de tema na topbar) -- .btn sozinho vira retângulo largo com o ícone perdido no meio quando não tem texto do lado. */ .btn-icon { width: 36px; height: 36px; padding: 0; flex-shrink: 0; } .btn-icon svg { width: 16px; height: 16px; } .btn-secondary { background: var(--color-surface); border-color: var(--color-border); color: var(--color-text); } .btn-secondary:hover { background: var(--color-surface-2); border-color: var(--color-text-muted); } .btn:focus-visible, .field input:focus-visible, .filters select:focus-visible, .filters input:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } .form-error { background: var(--color-danger-bg); color: var(--color-danger); border-radius: var(--radius-sm); padding: 10px 12px; font-size: 13px; margin-bottom: 16px; } .form-success { background: var(--color-success-bg); color: var(--color-success); border-radius: var(--radius-sm); padding: 10px 12px; font-size: 13px; margin-bottom: 16px; } .login-link-secundario { display: block; text-align: center; margin-top: 14px; font-size: 13px; color: var(--color-accent); text-decoration: none; } .login-link-secundario:hover { text-decoration: underline; } /* ---------- Brand ---------- */ .brand { display: flex; align-items: center; gap: 11px; } .brand-mark { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .brand-mark img { width: 100%; height: 100%; object-fit: contain; } .brand-name { font-family: var(--font-display); font-size: 16px; font-weight: 600; letter-spacing: -0.01em; color: inherit; } .brand-sub { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.02em; color: var(--color-text-muted); margin-top: 1px; } /* ---------- Shell ---------- */ .shell { display: flex; height: 100vh; } .sidebar { /* 200px, não 240px (13/09/2026, "está sobrando espaço em relação ao nome das páginas") -- o rótulo mais longo (Administração/Certidões) nem chega perto de precisar de 240px, sobrava faixa vazia entre o texto e a borda direita do menu. Recolhido (68px) já estava bom, não mexe nesse. */ width: 200px; background: var(--color-sidebar-bg); color: var(--color-sidebar-text); border-right: 1px solid var(--color-sidebar-border); display: flex; flex-direction: column; flex-shrink: 0; } /* Marca vertical e centralizada. Até 12/09 ficava só o símbolo + .brand-name em HTML (a marca nova não tinha texto embutido ainda). Em 13/09 o Caio mandou os dois lockups completos (texto preto pro modo claro, texto claro pro modo escuro) -- usa a imagem certa por tema em vez do texto HTML, pra manter a tipografia exata da marca. */ .sidebar .brand { flex-direction: column; align-items: center; gap: 6px; padding: 28px 20px 20px; position: relative; } .sidebar .brand-mark { width: auto; height: auto; } .brand-mark-wordmark { display: block; } .sidebar-logo { width: 100%; max-width: 150px; height: auto; display: block; } /* Default (sistema claro, ou sem preferência): mostra o logotipo escuro (texto preto), esconde o claro. Achado real (13/09/2026): antes só reagia a prefers-color-scheme -- com o toggle manual novo ([data-theme]), escolher "escuro" no botão com o sistema em claro deixava a sidebar escura com o texto PRETO (ilegível), porque nada aqui olhava pro atributo. */ .sidebar-logo-dark { display: none; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sidebar-logo-light { display: none; } :root:not([data-theme="light"]) .sidebar-logo-dark { display: block; } } :root[data-theme="dark"] .sidebar-logo-light { display: none; } :root[data-theme="dark"] .sidebar-logo-dark { display: block; } .sidebar .brand-sub { color: var(--color-sidebar-text); margin-top: 2px; } .sidebar-close { display: none; position: absolute; top: 10px; right: 10px; background: none; border: none; color: var(--color-sidebar-text); padding: 6px; cursor: pointer; border-radius: var(--radius-sm); } .sidebar-close:hover { background: var(--color-surface-2); color: var(--color-sidebar-text-hover); } .sidebar-close svg { width: 18px; height: 18px; display: block; } .sidebar-backdrop { display: none; position: fixed; inset: 0; background: rgba(10, 14, 17, 0.5); z-index: 199; } .menu-toggle { display: none; flex-shrink: 0; background: none; border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 8px; cursor: pointer; color: var(--color-text); } .menu-toggle svg { width: 19px; height: 19px; display: block; } .menu-toggle:hover { background: var(--color-surface-2); } .nav { flex: 1; padding: 10px 12px; overflow-y: auto; } .nav a { display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: var(--radius-sm); color: var(--color-sidebar-text); text-decoration: none; font-size: 13.5px; font-weight: 500; margin-bottom: 2px; transition: background-color .12s ease, color .12s ease; } .nav a:hover { background: var(--color-surface-2); color: var(--color-sidebar-text-hover); } .nav a.active { background: var(--color-accent-soft); color: var(--color-sidebar-text-hover); font-weight: 600; } .nav-icon { width: 16px; height: 16px; flex-shrink: 0; opacity: 0.95; color: inherit; } .sidebar-footer { padding: 14px 20px; border-top: 1px solid var(--color-sidebar-border); font-size: 12.5px; } .sidebar-footer-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } .sidebar-footer .user-name { color: var(--color-sidebar-text-hover); font-weight: 600; } .sidebar-footer-info { min-width: 0; } .sidebar-footer-info > div { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sidebar-avatar { flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; background: var(--gradient-accent); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; text-decoration: none; overflow: hidden; } .sidebar-avatar img { width: 100%; height: 100%; object-fit: cover; } /* Recolher menu (13/09/2026, pedido do Caio): flecha na mesma linha do "Sair", só em desktop -- no mobile o menu já é uma gaveta que fecha sozinha, esse controle não faz sentido lá. */ .sidebar-footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .logout-link { display: flex; align-items: center; gap: 7px; color: var(--color-danger); text-decoration: none; font-size: 12px; } .logout-link:hover { text-decoration: underline; } .sidebar-collapse-toggle { flex-shrink: 0; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; background: none; border: 1px solid var(--color-sidebar-border); border-radius: var(--radius-sm); color: var(--color-sidebar-text); cursor: pointer; transition: transform .15s ease, background-color .12s ease, color .12s ease; } .sidebar-collapse-toggle:hover { background: var(--color-surface-2); color: var(--color-sidebar-text-hover); } .sidebar-collapse-toggle svg { width: 15px; height: 15px; display: block; } .sidebar.collapsed .sidebar-collapse-toggle svg { transform: rotate(180deg); } .sidebar-logo-mini { display: none; width: 30px; height: 30px; object-fit: contain; } .main { flex: 1; display: flex; flex-direction: column; overflow: hidden; } .topbar { padding: 18px 28px; border-bottom: 1px solid var(--color-border); background: var(--color-surface); box-shadow: 0 1px 0 rgba(28, 27, 23, 0.02), 0 4px 12px rgba(28, 27, 23, 0.03); flex-shrink: 0; position: relative; z-index: 5; } .topbar h1 { margin: 0; font-family: var(--font-display); font-size: 21px; font-weight: 600; text-wrap: balance; } .topbar p { margin: 4px 0 0; font-size: 13px; color: var(--color-text-muted); } .topbar-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; } .topbar-title { flex: 1; min-width: 0; } .topbar-row .btn { flex-shrink: 0; } /* Teto de largura (13/09/2026, "melhorar espaçamento/responsividade na versão desktop") -- sem isso, em monitor largo (1920px+) os cards esticavam até virar retângulo quase vazio (só o número no meio de muito espaço em branco), em vez de manter proporção de card de verdade. Sem efeito em notebook/tela comum (a maioria fica abaixo do teto, então nem chega a centralizar). */ .content { flex: 1; overflow-y: auto; padding: 24px 28px 40px; max-width: 1400px; margin: 0 auto; width: 100%; } /* ---------- Cards / KPIs ---------- */ .kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-bottom: 28px; } .kpi-card { background: var(--color-surface); border: 1px solid var(--color-border); border-left: 3px solid var(--color-border); border-radius: var(--radius-md); padding: 18px 20px; box-shadow: var(--shadow-sm); transition: box-shadow .18s ease, transform .18s ease; display: block; text-decoration: none; color: inherit; } .kpi-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); } .kpi-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; } .kpi-card .kpi-label { font-size: 12.5px; color: var(--color-text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; } .kpi-icon { flex-shrink: 0; width: 30px; height: 30px; border-radius: 9px; background: var(--color-accent-soft); color: var(--color-accent); display: flex; align-items: center; justify-content: center; } .kpi-icon svg { width: 16px; height: 16px; } .kpi-card .kpi-value { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 30px; font-weight: 600; margin-top: 12px; letter-spacing: -0.01em; } .kpi-card .kpi-value.warn { color: var(--color-warning); } .kpi-card .kpi-value.danger { color: var(--color-danger); } .kpi-card:has(.kpi-value.warn) { border-left-color: var(--color-warning); } .kpi-card:has(.kpi-value.danger) { border-left-color: var(--color-danger); } .kpi-card:has(.kpi-value.warn) .kpi-icon { background: var(--color-warning-bg); color: var(--color-warning); } .kpi-card:has(.kpi-value.danger) .kpi-icon { background: var(--color-danger-bg); color: var(--color-danger); } /* Painéis "precisa de atenção" da Visão geral (13/09/2026) -- antes o dashboard só tinha os 4 números acima, sem nenhum dado por baixo. */ .atencao-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; } .atencao-lista { display: flex; flex-direction: column; } .atencao-linha { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 20px; border-bottom: 1px solid var(--color-border-soft); font-size: 13px; } .atencao-lista .atencao-linha:last-child { border-bottom: none; } .atencao-linha-titulo { font-weight: 600; } .atencao-linha-sub { color: var(--color-text-muted); font-size: 12.5px; margin-top: 1px; } .atencao-linha-valor { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--color-text-muted); font-size: 12.5px; white-space: nowrap; } .atencao-vazio { display: flex; align-items: center; gap: 8px; padding: 20px; color: var(--color-text-muted); font-size: 13px; } .atencao-vazio-check { flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; background: var(--color-success-bg); color: var(--color-success); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; } .panel { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; } .panel-header { padding: 16px 20px; border-bottom: 1px solid var(--color-border); display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .panel-header h2 { margin: 0; font-family: var(--font-display); font-size: 16.5px; font-weight: 600; } /* Automações (13/09/2026, revisão de espaçamento): antes era tudo estilo inline solto, cada seção com um valor de margem diferente -- virou uma escala só (24/36/44px) e classes reaproveitáveis, em vez de reinventar o espaçamento a cada `

` novo. Listas virou módulo/página própria no mesmo dia -- o banner aqui agora é só "Fluxos", sozinho. */ .automacoes-resumo-card { padding: 22px 24px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; } .automacoes-resumo-banner { margin-bottom: 36px; } .automacoes-secao { margin-bottom: 18px; } .automacoes-secao-titulo { font-family: var(--font-display); font-size: 16.5px; font-weight: 600; margin: 0 0 6px; } .automacoes-secao-lede { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--color-text-muted); max-width: 68ch; } .automacoes-secao-conteudo { margin-bottom: 44px; } .filters { display: flex; gap: 8px; flex-wrap: wrap; } .filters select, .filters input[type="search"] { padding: 7px 10px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-size: 13px; font-family: inherit; background: var(--color-surface); color: var(--color-text); } /* Achado real (14/09/2026, revisão geral): sem largura própria, o campo de busca caía no tamanho padrão do navegador (~170px) -- menor que o próprio placeholder ("Buscar por nome ou CNPJ…"), cortado em toda tela de lista que usa renderFilterableTable (praticamente o app inteiro). */ .filters input[type="search"] { width: 230px; } .filters select:focus, .filters input[type="search"]:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-accent-soft); } /* ---------- Table ---------- */ /* .panel corta com overflow:hidden (pro border-radius) -- sem isto, uma tabela com muitas colunas fica cortada em vez de rolar. */ .table-scroll { overflow-x: auto; } table { width: 100%; border-collapse: collapse; font-size: 13.5px; } thead th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-muted); font-weight: 600; padding: 11px 20px; background: var(--color-surface-2); border-bottom: 1px solid var(--color-border); white-space: nowrap; } tbody td { padding: 13px 20px; border-bottom: 1px solid var(--color-border-soft); vertical-align: middle; transition: background-color .1s ease; } tbody tr:last-child td { border-bottom: none; } tbody tr:hover { background: var(--color-surface-2); } tbody tr.row-link { cursor: pointer; } tbody tr.row-link:hover { background: var(--color-accent-soft); } .cell-muted { color: var(--color-text-muted); } td.cell-numeric, .kpi-value, .cell-date { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } .badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; } .badge-success { background: var(--color-success-bg); color: var(--color-success); } /* Cliente é a entidade central do produto -- indicadores dele (opt-in, ativo) usam o roxo de marca em vez do verde genérico de "sucesso" (13/09/2026, pedido do Caio: mesma cor do botão, não mais verde). */ .badge-accent { background: var(--color-accent-soft); color: var(--color-accent); } .badge-warning { background: var(--color-warning-bg); color: var(--color-warning); } .badge-danger { background: var(--color-danger-bg); color: var(--color-danger); } .badge-neutral { background: var(--color-neutral-bg); color: var(--color-neutral); } /* ---------- States ---------- */ .state-block { padding: 56px 24px; text-align: center; color: var(--color-text-muted); } .state-block .state-icon { font-size: 28px; margin-bottom: 10px; } .state-block h3 { margin: 0 0 6px; font-family: var(--font-display); font-size: 16px; font-weight: 600; color: var(--color-text); } .state-block p { margin: 0; font-size: 13px; max-width: 360px; margin-inline: auto; } .spinner { width: 20px; height: 20px; border: 2.5px solid var(--color-border); border-top-color: var(--color-accent); border-radius: 50%; animation: spin .7s linear infinite; margin: 0 auto 10px; } @keyframes spin { to { transform: rotate(360deg); } } .toast { position: fixed; bottom: 20px; right: 20px; background: var(--color-text); color: var(--color-bg); padding: 12px 18px; border-radius: var(--radius-sm); font-size: 13.5px; box-shadow: var(--shadow-md); z-index: 100; } .toast.error { background: var(--color-danger); color: #fff; } .modal-overlay { position: fixed; inset: 0; background: rgba(20, 25, 28, 0.55); display: flex; align-items: center; justify-content: center; z-index: 200; padding: 20px; } .modal-box { background: var(--color-surface); border-radius: var(--radius-md); width: 100%; max-width: 440px; max-height: 90vh; overflow-y: auto; box-shadow: var(--shadow-md); } /* Tags/listas (13/09/2026): "Gerenciar clientes" da lista embute uma tabela filtrável inteira -- 440px fica apertado demais pra ela. */ .modal-box.modal-box-wide { max-width: 780px; } .modal-header { padding: 18px 20px; border-bottom: 1px solid var(--color-border); display: flex; align-items: center; justify-content: space-between; } .modal-header h2 { margin: 0; font-family: var(--font-display); font-size: 17px; font-weight: 600; } .modal-header button { background: none; border: none; font-size: 20px; line-height: 1; cursor: pointer; color: var(--color-text-muted); padding: 4px; } .modal-body { padding: 20px; } .modal-footer { padding: 16px 20px; border-top: 1px solid var(--color-border); display: flex; justify-content: flex-end; gap: 8px; } .session-banner { background: var(--color-warning-bg); color: var(--color-warning); font-size: 13px; font-weight: 600; text-align: center; padding: 8px 16px; flex-shrink: 0; } /* ---------- Responsive ---------- */ /* Abaixo de 1024px o sidebar vira gaveta (drawer) sobreposta, acionada pelo botão hambúrguer -- em vez de espremer a navegação horizontal, que cortava itens fora da tela em tablet/mobile. */ @media (max-width: 1023px) { .menu-toggle { display: inline-flex; align-items: center; justify-content: center; } .sidebar-close { display: inline-flex; align-items: center; justify-content: center; } .sidebar-collapse-toggle { display: none; } .shell { position: relative; } .sidebar { position: fixed; inset: 0 auto 0 0; z-index: 200; width: min(280px, 84vw); transform: translateX(-100%); transition: transform .22s ease; box-shadow: var(--shadow-lg); } .sidebar.open { transform: translateX(0); } .sidebar-backdrop.open { display: block; } .sidebar-footer { display: block; } .content { padding: 18px; } .topbar { padding: 14px 18px; } } @media (min-width: 1024px) { .sidebar-backdrop { display: none !important; } /* Sidebar recolhida -- vira uma trilha só de ícones, dá mais espaço horizontal pro conteúdo da página (pedido do Caio, 13/09/2026). Só existe em desktop de propósito: no mobile a sidebar já é uma gaveta que fecha sozinha, não precisa desse controle a mais. */ .sidebar { transition: width .18s ease; } .sidebar.collapsed { width: 68px; } .sidebar.collapsed .nav-label, .sidebar.collapsed .sidebar-footer-info { display: none; } /* Achado real (13/09/2026, "pode manter o logotipo e não o círculo, só diminui o logotipo"): a versão anterior trocava pro ícone isolado (só a marca circular, sem o nome) quando recolhia -- o Caio prefere ver o logotipo de sempre (marca + "AUXflow"), só menor, do que trocar por um símbolo diferente. sidebar-logo-mini fica sem uso aqui de propósito (não removido do HTML pra não quebrar nada que dependa dele, só não é mais acionado). */ .sidebar.collapsed .sidebar-logo { max-width: 44px; } .sidebar.collapsed .brand { padding: 24px 8px 16px; } .sidebar.collapsed .nav { padding: 10px 8px; } .sidebar.collapsed .nav a { justify-content: center; padding: 9px; } .sidebar.collapsed .sidebar-footer { padding: 14px 12px; } .sidebar.collapsed .sidebar-footer-row { justify-content: center; margin-bottom: 12px; } .sidebar.collapsed .sidebar-footer-bottom { flex-direction: column-reverse; gap: 10px; } .sidebar.collapsed .logout-link { justify-content: center; } } /* Abaixo de 800px, tabela vira lista de cartões -- cada linha empilha rótulo/valor em vez de cortar coluna. O rótulo vem de data-label, escrito no pelo JS a partir do cabeçalho real da tabela. Breakpoint subiu de 640 pra 800 (13/09/2026, revisão de tablet): num iPad em pé (768px) a tabela de Clientes cabia só até a coluna de WhatsApp, cortando o resto -- rolagem horizontal funcionava, mas sem nenhuma pista visual de que dava pra rolar. */ @media (max-width: 800px) { .content { padding: 14px; } .kpi-grid { grid-template-columns: 1fr 1fr; gap: 10px; } .panel-header { padding: 14px 16px; } /* Empilha em vez de dividir a linha -- flex:1 sozinho deixava o campo de busca espremido a uns 80px quando tinha select + botão do lado (13/09/2026, achado revisando mobile: "Buscar por nome ou CNPJ" cortava pro placeholder ilegível "Buscar p"). */ .filters { width: 100%; flex-direction: column; align-items: stretch; } .filters select, .filters input[type="search"], .filters > .btn { width: 100%; } .table-scroll table, .table-scroll thead, .table-scroll tbody, .table-scroll th, .table-scroll td, .table-scroll tr { display: block; } .table-scroll thead { position: absolute; left: -9999px; } .table-scroll tbody { padding: 10px; display: flex; flex-direction: column; gap: 10px; } .table-scroll tbody tr { border: 1px solid var(--color-border-soft); border-radius: var(--radius-md); overflow: hidden; } .table-scroll tbody tr:hover { background: var(--color-surface); } .table-scroll tbody td { display: flex; align-items: center; justify-content: space-between; gap: 14px; text-align: right; padding: 9px 14px; border-bottom: 1px solid var(--color-border-soft); } .table-scroll tbody tr td:last-child { border-bottom: none; } .table-scroll tbody td::before { content: attr(data-label); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--color-text-muted); text-align: left; flex-shrink: 0; } .table-scroll tbody td[data-label=""]::before, .table-scroll tbody td:not([data-label])::before { content: none; } .modal-box { max-width: 100%; } .toast { left: 14px; right: 14px; bottom: 14px; } /* Campo "Nova senha" + botão "Gerar senha" (editar usuário): lado a lado cabe em desktop, mas em telas estreitas o input encolhia até truncar o placeholder -- acha real (09/09/2026) testando em 375px. */ #eu-senha { flex-basis: 100% !important; } #eu-gerar-senha { flex: 1 1 auto !important; } } /* ---------- Impressão (09/09/2026) ---------- */ /* "Exportar" nota fiscal usa window.print() em vez de janela nova (que bloqueador de pop-up podia barrar) -- isto esconde o resto da tela (sidebar, topbar, overlay escuro) na hora de imprimir, deixando só o conteúdo do modal, que é exatamente o que "exportar" devia produzir. */ @media print { body * { visibility: hidden; } #modal-box, #modal-box * { visibility: visible; } #modal-overlay { position: absolute; inset: 0; background: none; padding: 0; display: block; } #modal-box { position: absolute; inset: 0; max-width: 100%; box-shadow: none; border: none; } .modal-footer { display: none; } } /* ---------- Construtor de fluxos / Drawflow (13/09/2026) ---------- */ /* O CSS padrão do Drawflow vem com cores fixas (fundo ciano, borda preta -- ver drawflow.min.css) -- sobrescreve tudo com os tokens do app pra respeitar tema claro/escuro em vez de ficar visualmente estranho ao lado do resto do painel. */ /* Achado real (13/09/2026, "botão fluxos/rodar/salvar muito grandes, não precisa dessa linha, tudo pode ficar no mesmo quadrado"): a barra de ações vivia solta acima do construtor, com margem própria -- lia como duas caixas empilhadas em vez de uma ferramenta só. Vira uma .panel só (mesmo componente usado em toda lista do painel), com a barra de ações como .panel-header (também já padrão) e paleta+canvas dentro, sem nenhuma margem entre as partes. */ .fluxo-builder-panel { display: flex; flex-direction: column; } .fluxo-toolbar { gap: 10px; } .fluxo-toolbar-nome { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex: 1; min-width: 200px; } /* Sem caixa visível até passar o mouse/focar (13/09/2026, "veja como é no n8n") -- lá o nome do fluxo é só texto clicável, não um campo de formulário destacado; a borda só aparece quando faz sentido (editando ou prestes a). */ .fluxo-toolbar-nome input[type="text"] { font-size: 14px; font-weight: 600; font-family: var(--font-display); padding: 6px 9px; border: 1px solid transparent; border-radius: var(--radius-sm); background: transparent; color: var(--color-text); min-width: 180px; transition: background-color .12s ease, border-color .12s ease; } .fluxo-toolbar-nome input[type="text"]:hover { background: var(--color-surface-2); } .fluxo-toolbar-nome input[type="text"]:focus { background: var(--color-surface); border-color: var(--color-border); outline: none; } .fluxo-toolbar-nome select { padding: 6px 9px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text); font-size: 12.5px; } .fluxo-toolbar-acoes { display: flex; gap: 6px; flex-shrink: 0; } .fluxo-resultado:not(.hidden) { padding: 10px 20px; border-bottom: 1px solid var(--color-border); } .fluxo-canvas-wrap { position: relative; width: 100%; } /* Botão "+" flutuante (13/09/2026, "veja como é no n8n, o menu aparece só se clicar") -- substitui a paleta fixa lateral. Canto superior direito do canvas, mesmo lugar do editor de referência; canvas usa 100% da largura do quadro o tempo todo, painel de nós só ocupa espaço quando aberto. */ .fluxo-add-no-btn { position: absolute; top: 12px; right: 12px; z-index: 6; width: 32px; height: 32px; padding: 0; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; background: var(--color-accent-btn, var(--color-accent)); color: #fff; border: none; cursor: pointer; box-shadow: var(--shadow-sm); transition: background-color .12s ease; } .fluxo-add-no-btn:hover { background: var(--color-accent-hover); } .fluxo-add-no-btn svg { width: 16px; height: 16px; } .fluxo-add-no-painel { position: absolute; top: 50px; right: 12px; z-index: 6; width: 230px; max-height: min(70vh, 520px); overflow-y: auto; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-md); padding: 10px; } .fluxo-add-no-painel[hidden] { display: none; } .fluxo-paleta-item-icone { width: 15px; height: 15px; flex-shrink: 0; color: var(--color-text-muted); } /* Canto esquerdo (13/09/2026, "veja como é no n8n") -- mesmo lugar dos controles de zoom/fit de qualquer editor de fluxo de referência. */ .fluxo-zoom-controles { position: absolute; left: 12px; bottom: 12px; z-index: 5; display: flex; align-items: center; gap: 1px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); overflow: hidden; } .fluxo-zoom-controles button { border: none; background: transparent; color: var(--color-text); font-size: 13px; font-weight: 600; padding: 7px 11px; cursor: pointer; font-variant-numeric: tabular-nums; } .fluxo-zoom-controles button:hover { background: var(--color-accent-soft); color: var(--color-accent); } .fluxo-zoom-controles button + button { border-left: 1px solid var(--color-border); } #fluxo-zoom-reset { font-size: 11px; color: var(--color-text-muted); } .fluxo-builder-canvas { /* Grade de pontos bem mais discreta (13/09/2026, "veja como é no n8n, mais limpo a interface") -- a versão anterior usava a cor de borda cheia (mesmo tom usado em divisórias reais), competindo com o resto da tela. n8n e editores parecidos usam um ponto quase invisível, só uma referência espacial de fundo, não um elemento visual próprio. */ background-color: var(--color-surface); background-image: radial-gradient(circle, var(--color-border) 1px, transparent 1px); background-size: 26px 26px; opacity: 1; width: 100%; height: calc(100vh - 300px); } :root:not([data-theme="light"]) .fluxo-builder-canvas { background-image: radial-gradient(circle, color-mix(in srgb, var(--color-border) 55%, transparent) 1px, transparent 1px); } .fluxo-builder-canvas .drawflow-node { background: var(--color-surface); border: 1px solid var(--color-border); border-left: 3px solid var(--color-border); border-radius: var(--radius-md); color: var(--color-text); width: 224px; min-height: auto; padding: 12px 14px; box-shadow: none; transition: box-shadow .15s ease, border-color .15s ease; } .fluxo-builder-canvas .drawflow-node:hover { box-shadow: var(--shadow-sm); } /* Nó compacto (13/09/2026, "estilo n8n", refinado no mesmo dia: "formato quadrado padrão") -- quadrado fixo de verdade, não uma caixa que estica com o texto. Ícone fica na única parte com borda/sombra (mesmo espírito do próprio n8n: o "conector" é a caixinha do ícone, o texto é legenda solta embaixo, sem moldura própria) -- título de 3 palavras não deixa o nó torto na frente dos de 1 palavra só. Campos só aparecem no card que abre com duplo clique, ver abrirConfigNo() em app.js. Fluxos salvos ANTES desta mudança continuam com o nó grande antigo até serem reabertos e salvos de novo -- o HTML do nó é gravado junto do fluxo, não recalcula sozinho (mesma limitação de baking já documentada). */ .fluxo-builder-canvas .drawflow-node.fluxo-no-compacto-wrap { width: 80px; height: 80px; padding: 0; background: transparent; border: none; box-shadow: none; } .fluxo-builder-canvas .drawflow-node.fluxo-no-compacto-wrap:hover { box-shadow: none; } .fluxo-no-compacto { display: flex; flex-direction: column; align-items: center; gap: 5px; width: 100%; height: 100%; padding-top: 2px; } .fluxo-no-compacto-icone { width: 44px; height: 44px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); color: var(--color-accent); /* Achado real (15/09/2026, "deixe os nomes e as linhas mais bonitos"): o ícone não tinha nenhuma sombra em repouso, só ao passar o mouse -- ficava chapado/sem profundidade parado no canvas. Sombra leve sempre visível, mais forte no hover/selecionado (regras abaixo já existiam, só ficam mais perceptíveis agora que o repouso não é mais "zero"). */ box-shadow: var(--shadow-sm); transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease; } .fluxo-no-compacto-icone svg { width: 21px; height: 21px; } .fluxo-cat-gatilho .fluxo-no-compacto-icone { color: var(--color-accent-2); } .fluxo-no-compacto-titulo { /* Contraste maior (era --color-text-muted, quase ilegível em telas pequenas/projetor) + peso maior -- o nome do nó é a única forma de saber o que ele faz sem abrir o card, merece ler bem de primeira. */ font-size: 11.5px; font-weight: 600; color: var(--color-text); line-height: 1.25; text-align: center; width: 100%; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } .fluxo-builder-canvas .drawflow-node.fluxo-no-compacto-wrap:hover .fluxo-no-compacto-icone { border-color: var(--color-text-muted); box-shadow: var(--shadow-md); transform: translateY(-1px); } .fluxo-builder-canvas .drawflow-node.fluxo-no-compacto-wrap.selected .fluxo-no-compacto-icone { border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-accent-soft), var(--shadow-md); } /* Cancela o card grande do .selected genérico abaixo (borda/fundo/sombra no NÓ INTEIRO) -- no compacto, quem marca "selecionado" é só o ícone (regra acima), não o quadrado transparente ao redor. Precedência por especificidade (3 classes > 2), não por ordem no arquivo. */ .fluxo-builder-canvas .drawflow-node.fluxo-no-compacto-wrap.selected { background: transparent; border-color: transparent; box-shadow: none; } .fluxo-builder-canvas .drawflow-node.selected { background: var(--color-surface); border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-accent-soft); } .fluxo-builder-canvas .drawflow-node.selected.fluxo-cat-gatilho, .fluxo-builder-canvas .drawflow-node.selected.fluxo-cat-documento, .fluxo-builder-canvas .drawflow-node.selected.fluxo-cat-logica, .fluxo-builder-canvas .drawflow-node.selected.fluxo-cat-envio, .fluxo-builder-canvas .drawflow-node.selected.fluxo-cat-integracao { border-left-width: 3px; } /* Cor de categoria na borda esquerda -- leitura rápida do tipo de nó sem precisar ler o texto (mesmo espírito do border-left dos kpi-card de aviso/erro). */ /* Achado real (13/09/2026, "siga nossa paleta de cores padrão"): warning (âmbar) e success (verde) são cores semânticas de status, não fazem parte da paleta oficial de marca (blanco/ciano/purple/nocturne sea/solid grey) -- usá-las aqui pra "categoria de nó" inventava tom fora da paleta. Só ciano (gatilho, ponto de entrada) e roxo (resto) -- as duas cores de acento oficiais, nada novo. */ .fluxo-builder-canvas .drawflow-node.fluxo-cat-gatilho { border-left-color: var(--color-accent-2); } .fluxo-builder-canvas .drawflow-node.fluxo-cat-documento, .fluxo-builder-canvas .drawflow-node.fluxo-cat-logica, .fluxo-builder-canvas .drawflow-node.fluxo-cat-envio, .fluxo-builder-canvas .drawflow-node.fluxo-cat-integracao { border-left-color: var(--color-accent); } .fluxo-builder-canvas .drawflow-node .input, .fluxo-builder-canvas .drawflow-node .output { /* Alvo um pouco maior que o mínimo estético (13/09/2026, "não dá pra ligar os nodes") -- 12px era refinado na tela mas apertado pra clicar/arrastar com precisão de mouse de verdade. Perto do padrão do próprio Drawflow (20px) de propósito -- essa escolha da biblioteca já é pensada pra ser um alvo confortável de clicar/arrastar. */ width: 18px; height: 18px; background: var(--color-surface-2); border: 2px solid var(--color-accent); transition: transform .12s ease, background .12s ease; } .fluxo-builder-canvas .drawflow-node .input:hover, .fluxo-builder-canvas .drawflow-node .output:hover { background: var(--color-accent); transform: scale(1.2); } .fluxo-builder-canvas .connection .main-path { /* Achado real (15/09/2026, "deixe... as linhas que conectam eles mais bonitas"): traço fino e chapado, sem nenhuma profundidade -- ponta arredondada (em vez do corte reto padrão do SVG) e um brilho leve na cor de acento já deixam a curva parecer mais "desenhada" e menos "linha técnica de diagrama". */ stroke: var(--color-accent); stroke-width: 3px; stroke-linecap: round; filter: drop-shadow(0 0 3px color-mix(in srgb, var(--color-accent) 40%, transparent)); transition: stroke .12s ease, filter .12s ease; } .fluxo-builder-canvas .connection .main-path:hover { stroke: var(--color-accent-2); filter: drop-shadow(0 0 5px color-mix(in srgb, var(--color-accent-2) 55%, transparent)); } .fluxo-builder-canvas .connection .main-path.selected { stroke: var(--color-danger); filter: drop-shadow(0 0 4px color-mix(in srgb, var(--color-danger) 45%, transparent)); } .fluxo-builder-canvas .drawflow-delete { background: var(--color-danger); border-color: var(--color-surface); } .fluxo-no-header { display: flex; align-items: center; gap: 8px; margin: -12px -14px 10px; padding: 9px 14px; border-bottom: 1px solid var(--color-border-soft, var(--color-border)); background: var(--color-surface-2); border-radius: calc(var(--radius-md) - 1px) calc(var(--radius-md) - 1px) 0 0; } .fluxo-no-header svg { width: 15px; height: 15px; flex-shrink: 0; color: var(--color-text-muted); } .fluxo-no-header span { font-weight: 600; font-size: 12.5px; color: var(--color-text); } .fluxo-no-campo { margin-bottom: 8px; } .fluxo-no-campo:last-child { margin-bottom: 0; } .fluxo-no-campo label { display: block; font-size: 11.5px; color: var(--color-text-muted); margin-bottom: 3px; } .fluxo-no-campo input, .fluxo-no-campo select, .fluxo-no-campo textarea { width: 100%; padding: 6px 8px; font-size: 12.5px; font-family: inherit; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface-2); color: var(--color-text); /* Drawflow arrasta o nó pelo mousedown em qualquer lugar dele por padrão (draggable_inputs=true) -- desligado via JS (ver renderFluxoBuilder), este cursor:auto só reforça visualmente. */ cursor: auto; } .fluxo-no-campo input:focus, .fluxo-no-campo select:focus, .fluxo-no-campo textarea:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 2px var(--color-accent-soft); } .fluxo-no-aviso { font-size: 11px; color: var(--color-warning); margin-bottom: 8px; padding: 5px 7px; background: var(--color-warning-bg); border-radius: var(--radius-sm); } .fluxo-no-dica { font-size: 11px; color: var(--color-text-muted); margin-top: 2px; } .fluxo-paleta-item { display: flex; align-items: center; gap: 8px; padding: 9px 10px; margin-bottom: 6px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-size: 12.5px; color: var(--color-text); cursor: pointer; user-select: none; transition: border-color .12s ease, background .12s ease; } .fluxo-paleta-item:hover { border-color: var(--color-accent); background: var(--color-accent-soft); } .fluxo-paleta-item:active { transform: scale(.98); } .fluxo-paleta-item.inerte { opacity: .65; } .fluxo-paleta-grupo-titulo { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-muted); font-weight: 600; margin: 14px 0 6px; } .fluxo-paleta-grupo-titulo:first-child { margin-top: 0; }