@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=Manrope:wght@400;500;600;700;800&display=swap'); :root{ /* Paleta neutra "fria" (cinza-azulado) em vez do bege quente antigo — o fundo bege/creme e o preto acastanhado davam um ar datado; passou a um cinza claro moderno com preto neutro, no estilo do que se vê em apps atuais (Linear/Notion/Vercel). Contrastes recalculados e todos acima do mínimo WCAG AA de 4.5:1 para texto normal. Mesmo ajuste replicado abaixo para o tema escuro. Pedido do Filipe, 17/09/2026. */ /* --paper voltou ao tom claro de antes (o escurecimento uniforme não agradou); a separação entre o fundo da página e os cartões brancos passou a vir de um ligeiro degradê no fundo (ver --paper-gradient, usado só no ) em vez de escurecer o cinzento sólido usado também em inputs/chips. Pedido do Filipe, 17/09/2026. */ --ink:#12151b; --ink-dim:#565b66; --ink-faint:#5b6270; --paper:#f2f3f5; --panel:#ffffff; --line:#e1e3e8; --line-soft:#ecedf1; --paper-gradient: linear-gradient(160deg, #f8f9fb 0%, #eef0f3 45%, #e3e6eb 100%); /* Dourado real da marca (logótipo pcspeed) — mantido tal como pedido pelo Filipe em 16/09/2026, agora a destacar-se ainda mais sobre o cinza neutro do que sobre o bege antigo. copper-ink escuro porque o dourado claro não dá contraste suficiente com texto branco. */ --copper:#e3a62e; --copper-2:#f0c468; --copper-ink:#201c1a; --copper-wash:#faeed9; /* Tom mais claro do dourado, só para o degradê do cartão "Processos abertos" do dashboard — pedido do Filipe, 17/09/2026. O --copper normal (mais escuro) continua igual em todo o resto (botões, etc.). */ --copper-light:#f0c468; --copper-light-2:#f8e0a3; --blue:#35688f; --blue-wash:#dde8ee; --moss:#3e7a56; --moss-wash:#dfeae3; --amber:#a8791f; --amber-wash:#f1e6cd; --rust:#a93b33; --rust-wash:#f2ddda; /* Verde/vermelho mais vivos que --moss/--rust (que são propositadamente abafados, para os "chips" de estado do dia a dia) — só para os gráficos redondos do dashboard, onde o Filipe pediu mais vivacidade sem ficar berrante. Pedido do Filipe, 16/09/2026. */ --moss-vivid:#1f9d55; --rust-vivid:#dd3d3d; --violet:#6a5b9e; --violet-wash:#e7e2f3; /* --shadow igualado ao --shadow-lg (que antes só uns quantos cartões usavam) — pedido do Filipe, 17/09/2026, para a sombra mais visível ficar em todos os cartões/painéis da app, não só nalguns. */ --shadow: 0 2px 6px rgba(15,23,42,.07), 0 28px 56px -22px rgba(15,23,42,.28); --shadow-lg: 0 2px 6px rgba(15,23,42,.07), 0 28px 56px -22px rgba(15,23,42,.28); /* Sombra própria da barra lateral — mesmo degradê em duas camadas do --shadow normal, mas projetada para o lado (a barra fica encostada à esquerda) em vez de para baixo. Pedido do Filipe, 17/09/2026. */ --shadow-aside: 2px 0 6px rgba(15,23,42,.07), 20px 0 40px -26px rgba(15,23,42,.28); /* Radius aumentado (14->20 / 9->13), pedido do Filipe 16/09/2026: visual mais próximo das referências (Crextio/Flavorfit) — cartões e campos com cantos bem arredondados em vez do estilo anterior, mais reto. */ --radius: 20px; --radius-sm: 13px; --grad-copper: linear-gradient(135deg, var(--copper), var(--copper-2)); color-scheme: light dark; } /* Antes dependia de @media (prefers-color-scheme: dark) — o modo "Automático" foi retirado (não activava no desktop do Filipe porque o SO não comunicava o tema ao browser). Agora o tema escuro só depende do atributo data-theme="dark", posto sempre de forma explícita pelo script anti-flash em base.html e pelo botão da barra lateral — nunca do sistema operativo. Pedido do Filipe, 17/09/2026. */ :root[data-theme="dark"]{ /* Mesmo ajuste do lado claro: --paper volta ao tom de antes, e a separação para --panel vem do degradê (--paper-gradient) no , não de escurecer o cinzento sólido. Pedido do Filipe, 17/09/2026. */ --ink:#eef0f3; --ink-dim:#aab0bb; --ink-faint:#868d99; --paper:#0f1216; --panel:#181c22; --line:#2a2f38; --line-soft:#20242c; --paper-gradient: linear-gradient(160deg, #15181d 0%, #0f1216 45%, #090b0d 100%); --copper:#e8b23e; --copper-2:#f3cb70; --copper-ink:#201c1a; --copper-wash:#3d2f14; --copper-light:#f3cb70; --copper-light-2:#f8dda0; --blue:#82b3d8; --blue-wash:#20313d; --moss:#7ecb9c; --moss-wash:#1e3327; --amber:#e0b45c; --amber-wash:#3a2f18; --rust:#e2867d; --rust-wash:#3a2320; --moss-vivid:#34d17c; --rust-vivid:#f0655d; --violet:#ab9bd6; --violet-wash:#2c2740; } *{box-sizing:border-box;} body{margin:0;background:var(--paper-gradient);background-attachment:fixed;color:var(--ink);font-family:'Manrope','IBM Plex Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;-webkit-font-smoothing:antialiased;line-height:1.45;} .mono{font-family:'IBM Plex Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;} a{color:inherit;text-decoration:none;} button,input,select,textarea{font-family:inherit;} /* Transições subtis — sensação de app "viva" sem exageros: um fade+subir ligeiro quando cada página carrega (troca de página = navegação normal do browser, mas isto disfarça o corte seco), e um easing consistente nos elementos interativos mais comuns. */ @keyframes pageIn{from{opacity:0;transform:translateY(7px);}to{opacity:1;transform:translateY(0);}} main{animation:pageIn .32s cubic-bezier(.22,.61,.36,1) both;} @media (prefers-reduced-motion: reduce){ main{animation:none;} } .qbtn, .chip, .client-card, .card, table tbody tr td, .sidenav-links a, .pill, .complete-bar span, .tl-dot, .field input, .field select, .field textarea, .field-h input, .field-h select, .field-h textarea{ transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .18s ease, transform .15s ease, width .3s ease; } /* Layout: barra lateral fixa e sempre visível (nunca painéis deslizantes no ecrã principal) + conteúdo a ocupar toda a largura disponível. */ .shell{display:flex;min-height:100vh;} /* Barra lateral presa à altura do ecrã (não à altura do conteúdo) — o logótipo no topo e o utilizador ligado no fundo ficam sempre visíveis sem scroll; só a lista de páginas no meio faz scroll própria, e só se algum dia não couber. Pedido do Filipe, 10/09/2026. Padding-bottom reserva o espaço do rodapé fixo (.app-footer, ~37px), para o bloco do utilizador não ficar escondido por baixo dele — bug reportado pelo Filipe no mesmo dia. */ .sidenav{width:220px;flex-shrink:0;display:flex;flex-direction:column;background:var(--panel);border-right:1px solid var(--line);position:sticky;top:0;height:100vh;padding-bottom:40px;box-shadow:var(--shadow-aside);z-index:20;} .sidenav-brand{display:flex;flex-direction:column;gap:2px;padding:20px 18px 16px;flex-shrink:0;} .sidenav-brand .brand-logo{height:24px;width:auto;display:block;align-self:flex-start;} .sidenav-brand .sub{font-size:10.5px;color:var(--ink-faint);font-family:'IBM Plex Mono';letter-spacing:.04em;text-transform:uppercase;} .sidenav-links{display:flex;flex-direction:column;gap:2px;padding:8px 10px;flex:1;min-height:0;overflow-y:auto;} .sidenav-links a{display:flex;align-items:center;gap:11px;color:var(--ink-dim);font-size:13.5px;font-weight:500;padding:9px 12px;border-radius:9px;position:relative;} .sidenav-links a svg{width:17px;height:17px;flex-shrink:0;} .sidenav-links a:hover{background:var(--line-soft);color:var(--ink);} /* Pílula escura para o item ativo, em vez do fundo cobre + risco à esquerda — visual pedido pelo Filipe 16/09/2026 (referências Crextio/ Flavorfit, nav ativa como pílula preta cheia). */ .sidenav-links a.active{background:var(--ink);color:var(--paper);font-weight:600;border-radius:99px;} .sidenav-user{display:flex;align-items:center;gap:10px;padding:14px 16px;border-top:1px solid var(--line);flex-shrink:0;} .sidenav-user .avatar{width:32px;height:32px;border-radius:50%;background:var(--blue-wash);color:var(--blue);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;font-family:'IBM Plex Mono';flex-shrink:0;} .sidenav-user-info{display:flex;flex-direction:column;gap:1px;min-width:0;font-size:12.5px;} .sidenav-user-info span{font-weight:500;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .sidenav-user-info a{color:var(--ink-faint);font-size:11.5px;} .sidenav-user-info a:hover{color:var(--ink);text-decoration:underline;} .sidenav-sair{color:var(--ink-faint);font-size:11.5px;margin-left:auto;} .sidenav-sair:hover{color:var(--rust);} /* Botão de tema (claro/escuro, sem automático — pedido do Filipe, 17/09/2026) — ver wireThemeToggle() em app.js e o script anti-flash em base.html. Mostra só o ícone do estado ATUAL (marcado via data-tema no próprio botão); o outro fica escondido. */ .theme-toggle{margin-left:auto;flex-shrink:0;width:30px;height:30px;border-radius:8px;border:1px solid var(--line);background:transparent;color:var(--ink-dim);display:flex;align-items:center;justify-content:center;cursor:pointer;} .theme-toggle:hover{background:var(--line-soft);color:var(--ink);} .theme-toggle svg{width:16px;height:16px;} .theme-toggle .theme-icon-light,.theme-toggle .theme-icon-dark{display:none;} .theme-toggle[data-tema="light"] .theme-icon-light{display:block;} .theme-toggle[data-tema="dark"] .theme-icon-dark{display:block;} .shell-main{flex:1;min-width:0;display:flex;flex-direction:column;} /* Submenu de Processos (pesquisa + pipeline de estados), embutido na navegação do site entre "Processos" e "Clientes", sempre visível em qualquer página — pedido do Filipe, 10/09/2026. Usa o mesmo aspeto visual da navegação (não o estilo "chip" usado no resto da app). */ .sidenav-submenu{display:flex;flex-direction:column;gap:1px;margin:2px 0 6px;} .sidenav-submenu .sub-search{padding:3px 12px 7px;} .sidenav-submenu .sub-search input{width:100%;font-size:12px;padding:6px 10px;border-radius:7px;border:1px solid var(--line);background:var(--paper);color:var(--ink);outline:none;} .sidenav-submenu .sub-search input:focus{border-color:var(--copper);} .sidenav-submenu .sub-group{display:flex;align-items:center;justify-content:space-between;padding:6px 12px 6px 34px;font-size:11px;font-weight:600;color:var(--ink-faint);text-transform:uppercase;letter-spacing:.03em;cursor:pointer;border-radius:8px;} .sidenav-submenu .sub-group:hover{background:var(--line-soft);} .sidenav-submenu .sub-link{display:flex;align-items:center;gap:8px;padding:7px 12px 7px 34px;font-size:12.5px;font-weight:500;color:var(--ink-dim);border-radius:8px;} .sidenav-submenu .sub-link:hover{background:var(--line-soft);color:var(--ink);} .sidenav-submenu .sub-link.active{background:var(--copper-wash);color:var(--copper);font-weight:600;} .sidenav-submenu .sub-link .dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;} .sidenav-submenu .sub-link .n{margin-left:auto;font-family:'IBM Plex Mono';font-size:11px;color:var(--ink-faint);} .sidenav-submenu .sub-link.active .n{color:var(--copper);} .sidenav-submenu .sub-novo{padding:7px 12px;margin:1px 0 2px;color:var(--copper);font-weight:600;background:var(--copper-wash);} .sidenav-submenu .sub-novo:hover{background:var(--copper-wash);filter:brightness(0.96);} .sidenav-submenu .subgroup-v{display:flex;flex-direction:column;} .flash{background:var(--amber-wash);color:var(--amber);padding:10px 20px;font-size:13px;} main{flex:1;padding:26px 32px 88px;width:100%;} .mobile-submenu-toggle{ display:none;align-items:center;justify-content:center;flex-shrink:0; width:34px;height:34px;padding:0;border-radius:9px;color:var(--ink-dim); background:transparent;border:none;cursor:pointer; } .mobile-submenu-toggle:hover{background:var(--line-soft);} .mobile-submenu-toggle svg{width:15px;height:15px;} .mobile-submenu-toggle.open svg{transform:rotate(180deg);} @media (max-width:780px){ .shell{flex-direction:column;min-height:0;} .sidenav{width:100%;height:auto;min-height:0;padding-bottom:0;position:sticky;top:0;z-index:30;flex-direction:row;align-items:center;overflow:visible;border-right:none;border-bottom:1px solid var(--line);box-shadow:var(--shadow);} .sidenav-brand{padding:10px 14px;flex-shrink:0;} /* Esconder o subtítulo e encolher o botão de tema em telemóvel liberta espaço para a barra de ícones — sem isto o "GESTÃO DE PROCESSOS" e o botão de tema deixavam quase só ~130px para os 5 ícones de navegação (~175px só de largura própria), pelo que "Relatórios" e "Sistema" ficavam praticamente impossíveis de alcançar por scroll horizontal num ecrã estreito (ex.: iPhone 15, 393px). Bug reportado pelo Filipe, 11/09/2026 ("verifica toda a navegação no telemóvel"). O botão de tema continua acessível — só passa a ecrãs largos. */ .sidenav-brand .sub{display:none;} .theme-toggle{display:none;} /* flex:none (usado antes) impedia esta secção de encolher: como o resto da barra (logótipo + bloco do utilizador) não pode encolher, a barra toda ficava mais larga do que o ecrã em telemóveis estreitos (ex.: iPhone 15) — a página inteira ganhava scroll horizontal, e tudo o que é position:fixed (o rodapé, e o novo dropdown de Processos) passava a ser calculado contra essa largura errada em vez da largura real do ecrã, ficando parcialmente fora da vista. Com flex:1 1 auto + min-width:0 esta secção encolhe até ao espaço que sobra e usa o próprio overflow-x:auto para deslizar os ícones, em vez de empurrar a barra toda para fora do ecrã. Bug reportado pelo Filipe no iPhone 15 (dropdown aparecia vazio), 10/09/2026. */ .sidenav-links{flex-direction:row;padding:6px 8px;flex:1 1 auto;min-width:0;overflow-x:auto;-webkit-overflow-scrolling:touch;} /* ">" (filho direto) é essencial aqui: sem ele, esta regra também apanhava os de dentro dos "chips" do dropdown de Processos (.sidenav-submenu vive dentro deste