/* Fontes vendorizadas localmente (static/fonts/), mesmo princípio já aplicado ao Sortable.js: nenhuma dependência de CDN em tempo de execução. Baixadas da Google Fonts API, restritas aos subsets latin/latin-ext (suficiente pra português) — subsets cirílico/grego/vietnamita do payload original da Google Fonts foram descartados de propósito. */ @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/ibm-plex-mono-400-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/ibm-plex-mono-400-latin.woff2') format('woff2'); 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; } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/ibm-plex-mono-500-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/ibm-plex-mono-500-latin.woff2') format('woff2'); 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; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('../fonts/inter-400-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('../fonts/inter-400-latin.woff2') format('woff2'); 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; } @font-face { font-family: 'Outfit'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('../fonts/outfit-400-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Outfit'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('../fonts/outfit-400-latin.woff2') format('woff2'); 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 { --primary: #1B3A63; --secondary: #2F6B62; --accent: #B8863E; --bg: #F5F3EE; --surface: #FFFFFF; --surface-alt: #ECE9E2; --ink: #1B1F23; --ink-soft: #565049; --border: #DEDACE; --success: #2F9E6E; --warning: #C89B3C; --error: #B3432D; --info: #3B82F6; --sidebar-bg: #161B2E; --sidebar-accent: #6C63F5; --font-display: 'Outfit', -apple-system, sans-serif; --font-body: 'Inter', -apple-system, sans-serif; --font-mono: 'IBM Plex Mono', monospace; --radius: 12px; --radius-sm: 8px; --shadow: 0 1px 2px rgba(27, 31, 35, 0.05), 0 6px 20px rgba(27, 31, 35, 0.06); /* Sombra de CONTÊINER em repouso — card, tile, coluna. Mais leve que --shadow, que é de modal e popover: contêiner parado não deve parecer flutuando. Substitui a moldura, que ficou dura demais quando a --border ganhou contraste em 25/08. */ --shadow-suave: 0 1px 2px rgba(27, 31, 35, 0.04), 0 2px 8px rgba(27, 31, 35, 0.06); } /* ---------- Paletas sequenciais para dados (gráficos/BI) — registradas 08/08/2026 ---------- Ideais para dados ORDENADOS (ex.: evolução temporal, valores crescentes) — cada escala vai do passo 1 (mais claro) ao passo 6 (mais escuro). Não usar pra dados categóricos sem ordem (nesse caso, misturar hues diferentes, não passos da mesma escala). Consumidor previsto: módulo de Relatórios e BI e gráficos de KPI (ainda não implementados — ver PROJETO_STATUS.md e kpi-dashboard-builder). Não confundir com as paletas de tema da interface (tabela `paletas`, seed.sql) — aquelas são cores semânticas de UI; estas são escalas de dado pra visualização. */ :root { --seq-azul-1: #e9f0fb; --seq-azul-2: #a6c2f0; --seq-azul-3: #6294e5; --seq-azul-4: #2368d6; --seq-azul-5: #184792; --seq-azul-6: #0d264f; --seq-ciano-1: #e9f4fb; --seq-ciano-2: #a6d4f0; --seq-ciano-3: #62b3e5; --seq-ciano-4: #2391d6; --seq-ciano-5: #186392; --seq-ciano-6: #0d364f; --seq-indigo-1: #e9ebfb; --seq-indigo-2: #a6aef0; --seq-indigo-3: #6271e5; --seq-indigo-4: #2338d6; --seq-indigo-5: #182692; --seq-indigo-6: #0d154f; --seq-roxo-1: #f2e9fb; --seq-roxo-2: #cba6f0; --seq-roxo-3: #a462e5; --seq-roxo-4: #7c23d6; --seq-roxo-5: #551892; --seq-roxo-6: #2e0d4f; --seq-teal-1: #e9fbf7; --seq-teal-2: #a6f0de; --seq-teal-3: #62e5c5; --seq-teal-4: #23d6a9; --seq-teal-5: #189274; --seq-teal-6: #0d4f3e; --seq-verde-1: #effbe9; --seq-verde-2: #c0f0a6; --seq-verde-3: #90e562; --seq-verde-4: #62d623; --seq-verde-5: #439218; --seq-verde-6: #244f0d; --seq-magenta-1: #fbe9fb; --seq-magenta-2: #f0a6ee; --seq-magenta-3: #e562e1; --seq-magenta-4: #d623d0; --seq-magenta-5: #92188e; --seq-magenta-6: #4f0d4d; --seq-dourado-1: #fbf7e9; --seq-dourado-2: #f0dfa3; --seq-dourado-3: #e5c75d; --seq-dourado-4: #cea922; --seq-dourado-5: #886f16; --seq-dourado-6: #42360b; } html[data-theme="dark"] { --bg: #14181C; --surface: #1B2025; --surface-alt: #23292F; --ink: #EDEAE3; --ink-soft: #A7A196; --border: #30363C; --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 6px 24px rgba(0,0,0,0.3); --shadow-suave: 0 1px 2px rgba(0,0,0,0.25), 0 2px 8px rgba(0,0,0,0.28); } @media (prefers-color-scheme: dark) { html:not([data-theme]) { --bg: #14181C; --surface: #1B2025; --surface-alt: #23292F; --ink: #EDEAE3; --ink-soft: #A7A196; --border: #30363C; --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 6px 24px rgba(0,0,0,0.3); --shadow-suave: 0 1px 2px rgba(0,0,0,0.25), 0 2px 8px rgba(0,0,0,0.28); } } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: 15px; line-height: 1.5; transition: background 0.2s ease, color 0.2s ease; } h1, h2, h3, .display { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.01em; color: var(--ink); margin: 0 0 4px; } a { color: inherit; text-decoration: none; } /* ---------- Botões ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; /* 33px de altura, contra os 43px de antes. Medido em 25/08/2026: a barra de ferramentas do Pipeline sozinha ocupava 43px, e o Zoho e o ClickUp fazem o mesmo trabalho em ~32. `line-height` explícito porque sem ele a altura depende do line-height do body — foi por isso que 12px de fonte com 6px de padding produzia 39px de pílula, número que ninguém consegue prever lendo a regra. */ padding: 7px 14px; border-radius: var(--radius-sm); border: 1px solid transparent; font-family: var(--font-body); font-size: 13px; line-height: 1.4; font-weight: 600; cursor: pointer; transition: all 0.15s ease; } .btn-primary { background: var(--primary); color: #fff; } .btn-primary:hover { filter: brightness(1.1); } /* Verde claro pedido por Rocélio, 31/08/2026, pro "Tornar Cliente" — mesmo tom suave (color-mix a 15%) já usado nos badges de sucesso/concluído. */ .btn-sucesso-suave { background: color-mix(in srgb, var(--success) 15%, var(--surface)); color: var(--success); } .btn-sucesso-suave:hover { background: color-mix(in srgb, var(--success) 25%, var(--surface)); } /* Sem borda, por decisão de Rocélio em 25/08/2026: a moldura em volta de cada botão de barra polui, e as referências (Zoho, ClickUp) usam botão limpo que só reage ao mouse. O preço é real e vale saber: sem borda e sem fundo, o botão em repouso é texto — a affordance passa a depender do hover, que não existe em tela de toque. Por isso o fundo de repouso é `surface-alt`, e não transparente: dá o contorno suave que diz "isto é clicável" sem desenhar moldura. Escala de escurecimento — pedido de Rocélio, 30/08/2026, revisado no mesmo dia: a barra (.pipeline-toolbar) não tinha fundo NENHUM (era transparente, mostrava o --bg da página por trás), e o botão usava `filter: brightness` sobre `--surface-alt` — que em temas customizados (Aparência deixa `bg`/`surface_alt`/`ink` todos livres) podem nascer próximos o bastante pra a diferença sumir. Daqui pra baixo os três níveis (barra < botão < selecionado) partem do MESMO `--bg` e só variam a porcentagem de `--ink` misturada — sempre visível nos dois temas, porque --ink É a cor escolhida pra ter contraste contra --bg (senão o texto normal da página já seria ilegível). Mistura maior = mais na direção de --ink: escurece no tema claro (--ink escuro), clareia no escuro (--ink claro) — que é a elevação certa em cada tema, não um capricho. */ /* O fundo da barra mistura --toolbar-cor (configurável em Configurações → Aparência → "Barra de ferramentas secundária") por cima da base neutra de sempre — não só --ink. Reescrito em 05/09/2026: a versão anterior (só color-mix(ink, X%, bg), 5% no claro / 9% no escuro por causa de um achado de contraste no escuro, ver histórico) dependia inteiramente de ink+bg pra existir, e dependia de dois números por tema. Um valor único (8% ink de base + 15% toolbar-cor por cima) resolve os dois temas sem precisar de `[data-theme="dark"]` nem `@media` — medido com o --toolbar-cor padrão (#1B3A63, mesmo valor de --primary): no claro o fundo desloca ~55 pontos de RGB do branco do card (sobra de longe), no escuro ~9-15 pontos do #1B2025 do card — pouco em termos absolutos, mas com matiz de verdade (não cinza puro), que o olho lê melhor perto do preto do que a mesma distância só em luminância. Pedido de Rocélio: reaproveitar a configuração já existente em vez de inventar uma cor nova só pra isto — por isso o token é `--toolbar-cor`, o mesmo que já tingia o HOVER dos botões da barra, não uma variável nova. */ .pipeline-toolbar { background: color-mix(in srgb, var(--toolbar-cor) 15%, color-mix(in srgb, var(--ink) 8%, var(--bg))); border-radius: var(--radius); padding: 8px 10px; } .btn-outline { background: color-mix(in srgb, var(--ink) 11%, var(--bg)); border-color: transparent; color: var(--ink); } .btn-outline:hover { background: color-mix(in srgb, var(--primary) 12%, color-mix(in srgb, var(--ink) 11%, var(--bg))); color: var(--primary); } /* Mesmo idioma de "selecionado" do .view-switch-btn.active — filtro rápido ativo (ex: "Atribuído a mim" em Tarefas) usa a mesma cor configurável. Base "16% ink" (mais que os 11% do botão comum) garante que o selecionado nasce mais escuro ANTES do tingimento de --toolbar-selecionado por cima — só tingir --surface (podendo ser mais claro que --bg, caso do tema padrão) não garantia a ordem barra < botão < selecionado pedida. */ .btn-outline.btn-selecionado { background: color-mix(in srgb, var(--toolbar-selecionado) 22%, color-mix(in srgb, var(--ink) 16%, var(--bg))); color: var(--toolbar-selecionado); } /* A barra do Pipeline usa a cor PRÓPRIA dela, não a --primary do app inteiro. Sem isto, "Cor principal" e "Botões da barra secundária" seriam sempre a mesma coisa na tela, e o campo novo existiria sem efeito visível — ambos nascem iguais na migração, mas só ficam independentes se a regra existir. */ .pipeline-toolbar .btn-outline:hover, .pipeline-toolbar .ai-pill-btn:hover { background: color-mix(in srgb, var(--toolbar-cor) 12%, color-mix(in srgb, var(--ink) 11%, var(--bg))); color: var(--toolbar-cor); } /* O selo de filtro aplicado. Até 25/08/2026 esse estado não tinha cor nenhuma — só o texto "(2)" ao lado do rótulo dizia que havia filtro. Mesma fórmula do .view-switch-btn.active, para os dois lerem como um só idioma. */ .pipeline-toolbar .btn-outline.tem-filtro { background: color-mix(in srgb, var(--toolbar-selecionado) 22%, color-mix(in srgb, var(--ink) 16%, var(--bg))); color: var(--toolbar-selecionado); } .btn-block { width: 100%; } .evento-form-vinculo-toggle { display: flex; gap: 20px; margin: 6px 0 14px; } .evento-form-vinculo-toggle label { display: flex; align-items: center; gap: 6px; margin: 0; font-weight: 500; } /* ---------- Formulários ---------- */ label { display: block; font-size: 13px; font-weight: 600; color: var(--ink-soft); margin: 14px 0 6px; } input[type="text"], input[type="password"], input[type="email"], input[type="number"], input[type="date"], input[type="datetime-local"], select, textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); font-family: var(--font-body); font-size: 14px; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 25%, transparent); } /* ---------- Flash messages ---------- */ .flash { padding: 12px 16px; border-radius: var(--radius-sm); font-size: 14px; margin-bottom: 16px; } .flash-success { background: color-mix(in srgb, var(--success) 15%, var(--surface)); color: var(--success); border: 1px solid color-mix(in srgb, var(--success) 35%, transparent); } .flash-error { background: color-mix(in srgb, var(--error) 15%, var(--surface)); color: var(--error); border: 1px solid color-mix(in srgb, var(--error) 35%, transparent); } /* ---------- Tela de login (portal) ---------- */ .portal-page { margin: 0; font-family: var(--font-body); background: var(--bg); } .portal-theme-toggle { position: fixed; top: 20px; right: 20px; z-index: 10; width: 38px; height: 38px; border-radius: 50%; border: none; background: #161B2E; color: #fff; font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0,0,0,0.25); } .portal-theme-toggle:hover { background: #232a45; } .portal-layout { display: flex; min-height: 100vh; } .portal-hero { display: none; width: 44%; flex-direction: column; justify-content: space-between; background-color: var(--sidebar-bg); background-size: cover; background-position: center; padding: 40px; } @media (min-width: 1024px) { .portal-hero { display: flex; } } .portal-hero-logo { width: 140px; mix-blend-mode: screen; } .portal-hero-title { color: #fff; font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; line-height: 1.4; letter-spacing: -0.01em; margin: 64px auto 0; max-width: 30rem; text-align: center; } .portal-hero-footer { color: rgba(255,255,255,0.6); font-size: 12px; margin: 0; text-align: center; } .portal-main { flex: 1; display: flex; align-items: center; justify-content: center; padding: 40px 24px; } .portal-panel { width: 100%; max-width: 440px; } .portal-mobile-logo { display: block; width: 120px; margin: 0 auto 28px; } @media (min-width: 1024px) { .portal-mobile-logo { display: none; } } .portal-apps { display: flex; flex-direction: column; gap: 10px; margin-bottom: 24px; } .portal-app { appearance: none; display: flex; align-items: center; gap: 14px; width: 100%; padding: 12px 14px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface); font-family: inherit; text-align: left; cursor: pointer; transition: transform 0.15s cubic-bezier(.2,.8,.2,1), border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease; } .portal-app:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--card-color) 45%, var(--border)); } .portal-app:active { transform: translateY(0) scale(0.99); } .portal-app-selected { border-color: color-mix(in srgb, var(--card-color) 40%, var(--border)); background: color-mix(in srgb, var(--card-color) 7%, var(--surface)); } .portal-app-icon { flex-shrink: 0; width: 38px; height: 38px; border-radius: 9px; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--card-color) 16%, var(--surface)); color: var(--card-color); } .portal-app-icon svg { width: 18px; height: 18px; } .portal-app-body { flex: 1; min-width: 0; } .portal-app-name { display: block; font-size: 14px; font-weight: 700; color: var(--ink); } .portal-app-desc { display: block; font-size: 11px; color: var(--ink-soft); line-height: 1.35; margin-top: 1px; } .portal-app-arrow { flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--surface-alt); color: var(--ink-soft); transition: transform 0.2s cubic-bezier(.2,.8,.2,1), background 0.2s ease, color 0.2s ease; } .portal-app-arrow svg { width: 12px; height: 12px; } .portal-app:hover .portal-app-arrow { transform: translateX(3px); background: var(--card-color); color: #fff; } .auth-hint a { color: var(--primary); font-weight: 600; } .auth-form { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 28px 26px; } .auth-form .btn { margin-top: 22px; } .auth-hint { margin-top: 20px; font-size: 12px; color: var(--ink-soft); text-align: center; line-height: 1.5; } /* ---------- Layout raiz ---------- */ .app-shell { display: grid; grid-template-columns: 260px 1fr; min-height: 100vh; } /* 60px, e não os 72px de antes: recolhida, a barra só precisa caber o ícone (20px) com respiro. Os 12px devolvidos vão para o conteúdo em toda tela. */ .app-shell.sidebar-collapsed { grid-template-columns: 60px 1fr; } .app-shell > * { min-width: 0; } /* ---------- Sidebar ---------- */ /* sticky + height de viewport para a sidebar não subir junto com a página. Sem isto o .app-shell usa min-height:100vh, a coluna da sidebar estica com o conteúdo, o .menu cresce até caber tudo e o overflow-y:auto dele nunca chega a valer — quem rolava era a página inteira, levando o menu embora. É o mesmo tratamento que o mobile e o drawer aberto já faziam com position:fixed (ver as media queries abaixo, que continuam vencendo esta regra). align-self:start é necessário: como item de grid a sidebar seria esticada até a altura da linha, e sticky não teria folga para grudar. */ /* Sem padding-top (02/09/2026, era 20px): a .topbar ao lado não tem nenhum respiro antes de si — height:48px começando em y=0 — então qualquer padding-top aqui empurrava o logo pra baixo da linha do título "Pipeline". O padding-bottom continua, é o respiro antes do :menu. */ .sidebar { background: var(--sidebar-bg); padding: 0 0 20px; display: flex; flex-direction: column; color: color-mix(in srgb, var(--sidebar-ink) 85%, transparent); position: sticky; top: 0; height: 100vh; align-self: start; } .masthead { padding: 0 20px 20px; } /* height fixo de 48px, igual ao de .topbar (não min-height:60px) — é isso que alinha o logo com o título "Pipeline" na mesma linha. Igual nos dois estados (aberto/recolhido) de propósito: antes o recolhido empilhava ícone e seta em coluna pra caber, e isso deslocava o ícone pra baixo — achado por Rocélio, 02/09/2026, comparando os dois estados lado a lado. A seta agora sai do fluxo (position:absolute, ver .sidebar-collapse-btn abaixo) só no recolhido, então o ícone não perde o centro por causa dela. */ .masthead-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 48px; position: relative; } .brand { font-family: var(--font-display); font-size: 20px; font-weight: 700; color: #fff; } /* Escapou da migração para --sidebar-ink de 25/08: era branco fixo, e num tema de menu claro ficaria invisível. */ /* position:absolute (02/09/2026): sem isto, .tagline participa da altura de .brand-block, e como só existe no menu ABERTO (.sidebar-collapsed esconde), o bloco tinha alturas diferentes nos dois estados — centralizar um bloco de altura variável dentro de .masthead-top (align-items:center) fazia o ícone do logo pular de posição ao recolher/expandir. Achado real, comparando os dois estados lado a lado. Tirar do fluxo faz .brand-block ter sempre a altura de .brand sozinho, igual nos dois estados. */ .brand-block { position: relative; } .tagline { position: absolute; top: 100%; left: 0; white-space: nowrap; font-size: 11px; color: color-mix(in srgb, var(--sidebar-ink) 50%, transparent); margin-top: 2px; } .sidebar-collapse-btn { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.15); background: rgba(255,255,255,0.04); color: rgba(255,255,255,0.6); display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 15px; } .sidebar-collapse-btn:hover { color: var(--sidebar-ink); background: color-mix(in srgb, var(--sidebar-ink) 12%, transparent); } .drawer-close-btn { display: none; flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.15); background: rgba(255,255,255,0.04); color: rgba(255,255,255,0.6); align-items: center; justify-content: center; cursor: pointer; font-size: 20px; line-height: 1; } .drawer-close-btn:hover { color: #fff; background: rgba(255,255,255,0.12); } .sidebar-scrim { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 190; } /* Recolhido, o favicon permanece no canto — é ele que identifica o sistema quando o nome não cabe. Antes a regra escondia `.brand-block` inteiro, e o ícone ia junto: o topo do menu ficava só com a seta. */ /* Sem padding lateral no recolhido: os 20px de cada lado do `.masthead` sobravam numa barra de 60px e empurravam o ícone para fora do centro. */ .sidebar-collapsed .masthead { padding: 0 0 20px; } .sidebar-collapsed .masthead-top { justify-content: center; } .sidebar-collapsed .brand { justify-content: center; } /* A seta sai do fluxo normal e vira um badge no canto do ícone — não pode mais competir por espaço/altura com ele (era o empilhamento em coluna que descia o ícone, ver comentário em .masthead-top). Pequena o bastante pra não estourar os 60px da sidebar recolhida. */ .sidebar-collapsed .sidebar-collapse-btn { position: absolute; right: -2px; bottom: -2px; width: 20px; height: 20px; font-size: 12px; } .sidebar-collapsed .brand-nome, .sidebar-collapsed .tagline, .sidebar-collapsed .menu-label-text, .sidebar-collapsed .soon-badge { display: none; } .sidebar-collapsed .menu-item { justify-content: center; padding: 8px 0; } /* display:flex + flex-direction:column (10/09/2026, menu arrastável) — antes bastava o empilhamento normal de bloco; a propriedade `order` que resolve a posição de cada item (ver app.py:inject_preferencias_visuais, ordem_menu_pos) só tem efeito dentro de um contêiner flex. Empilha igual ao bloco de antes — sem gap/margin herdado, não muda o espaçamento visual, só habilita o item a ser reordenado. */ .menu { display: flex; flex-direction: column; flex: 1; padding: 0 9px; overflow-y: auto; } /* Barra de rolagem sutil, só no hover (07/09/2026) — o menu sempre teve overflow-y:auto (necessário: .sidebar é position:sticky + 100vh, é o .menu que rola, não a página toda), mas só passou a ESTOURAR de fato quando "Mapa de Dependências" virou item de topo (antes vivia dentro de um submenu fechado). Cor vem de --sidebar-ink (mesma base do hover de .menu-item, só que mais forte: 20% em vez de 8%, porque aqui precisa se notar contra o fundo escuro em vez de só sinalizar hover) — nunca uma cor nova, pra sobreviver a paleta customizada (ver templates/base.html, --sidebar-ink vem da paleta do usuário). Fica transparente em repouso nos dois motores (scrollbar-width mais scrollbar-color pro Firefox, ::-webkit-scrollbar pro Chrome/Safari) — nenhum dos padrões de scrollbar já existentes no projeto (kanban, filter-panel-scroll) cobria "visível só no hover", só "sempre escondida" ou "sempre fina". */ .menu { scrollbar-width: none; scrollbar-color: transparent transparent; } .menu:hover { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--sidebar-ink) 20%, transparent) transparent; } .menu::-webkit-scrollbar { width: 6px; } .menu::-webkit-scrollbar-track { background: transparent; } .menu::-webkit-scrollbar-thumb { background: transparent; border-radius: 999px; } .menu:hover::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--sidebar-ink) 20%, transparent); } /* Chip de usuário — movido do topbar pra base da sidebar em 02/09/2026 (pedido de Rocélio, deixar a barra do topo mais limpa). .menu logo acima tem flex:1 e é quem tem overflow-y:auto; este bloco, de tamanho fixo, nasce empurrado pro fim da coluna sem precisar de margin-top:auto. position:relative ancora o painel — sem isto o absolute dele se penduraria no primeiro ancestral posicionado, que seria a sidebar inteira (sticky também conta como posicionado), não este chip especificamente. */ .sidebar-user { padding: 12px 9px 0; position: relative; } .sidebar-collapsed .sidebar-user { padding: 12px 0 0; } .sidebar-collapsed .user-meta { display: none; } .sidebar-collapsed .sidebar-user .user-chip { justify-content: center; } .menu-item { display: flex; align-items: center; justify-content: flex-start; gap: 10px; /* 8px de padding e fonte 13, contra 11px e 14 de antes. O menu tem 14 telas: cada pixel por item multiplica por catorze, e a barra precisava rolar em tela de 13". `line-height` explícito pela mesma razão dos botões — sem ele a altura herda a do body e o resultado não é previsível pela regra. */ padding: 8px 12px; border-radius: var(--radius-sm); cursor: pointer; font-size: 14px; line-height: 1.4; font-weight: 400; color: color-mix(in srgb, var(--sidebar-ink) 75%, transparent); } .menu-item:hover { background: color-mix(in srgb, var(--sidebar-ink) 8%, transparent); color: var(--sidebar-ink); } /* Tooltip do item de menu — só aparece quando o rótulo do texto está oculto (menu recolhido no desktop, ou o rail automático de 72px do tablet), controlado via JS (static/js/main.js) checando o display computado de .menu-label-text, não uma classe — funciona nos dois casos sem duplicar lógica por breakpoint. */ .sidebar-tooltip { position: fixed; z-index: 500; top: 0; left: 0; transform: translate(0, -50%); background: var(--sidebar-bg); color: #fff; font-size: 13px; font-weight: 500; padding: 7px 11px; border-radius: var(--radius-sm); white-space: nowrap; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity 0.12s ease; box-shadow: 0 4px 14px rgba(0,0,0,0.25); } .sidebar-tooltip.visible { opacity: 1; visibility: visible; } /* Ajuda de campo — mesmo mecanismo do .sidebar-tooltip (um elemento único reaproveitado, posicionado por getBoundingClientRect), mas com quebra de linha e largura máxima: aqui o conteúdo é uma frase explicando o campo, não um rótulo curto. Não usa o title nativo de propósito — ele só aparece depois de ~1s com o mouse parado, atraso que já tinha incomodado no menu lateral. */ .campo-tooltip { position: fixed; z-index: 500; top: 0; left: 0; max-width: 280px; background: var(--sidebar-bg); color: var(--sidebar-ink); font-size: 12px; font-weight: 400; line-height: 1.45; padding: 8px 11px; border-radius: var(--radius-sm); pointer-events: none; opacity: 0; visibility: hidden; transition: opacity 0.12s ease; box-shadow: 0 4px 14px rgba(0,0,0,0.25); } .campo-tooltip.visible { opacity: 1; visibility: visible; } /* Componente: seletor de cor por paleta (templates/_componentes/seletor_cor.html + modules/paleta.py). Quebra em linha de propósito: dez amostras em fila única espremeriam o modal ou estourariam a largura dele. Aqui quebrar é o certo — é lista de conteúdo, não barra de ferramenta (ver a regra de barra, que é o caso oposto). A cor vem por --amostra inline, definida pela paleta; o CSS não tem uma classe por cor, senão acrescentar uma décima primeira exigiria mexer em CSS. */ .paleta-cores { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; } .paleta-cor-opcao { width: 28px; height: 28px; flex-shrink: 0; padding: 0; cursor: pointer; border-radius: 50%; background: var(--amostra); border: 2px solid transparent; /* O anel de seleção fica FORA da cor (box-shadow com spread), não como borda: borda comeria da própria amostra e mudaria o tamanho aparente conforme a seleção, fazendo as bolinhas dançarem ao escolher. */ box-shadow: 0 0 0 1px var(--border); transition: box-shadow 0.12s ease, transform 0.12s ease; } .paleta-cor-opcao:hover { transform: scale(1.12); } .paleta-cor-opcao.selecionada { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--amostra); } /* Sublinhado pontilhado avisa que o rótulo tem explicação — sem isso ninguém descobre que passar o mouse ali faz algo. */ label[data-ajuda] { cursor: help; text-decoration: underline dotted 1px; text-underline-offset: 3px; } .menu-item.active { font-weight: 500; background: color-mix(in srgb, var(--sidebar-accent) 25%, transparent); color: var(--sidebar-ink); } .menu-icon { width: 18px; height: 18px; opacity: 0.8; flex-shrink: 0; } .menu-item.active .menu-icon { opacity: 1; } .menu-item-disabled { cursor: not-allowed; opacity: 0.45; } .menu-item-disabled:hover { background: none; color: color-mix(in srgb, var(--sidebar-ink) 75%, transparent); } .soon-badge { font-size: 9px; text-transform: uppercase; letter-spacing: 0.04em; background: rgba(255,255,255,0.12); padding: 2px 6px; border-radius: 999px; flex-shrink: 0; } /* ---------- Topbar ---------- */ .topbar { /* 48px, e não os 64px de antes: com o título agora aqui dentro, a barra acumulava altura sem ganhar função. Medido em 25/08/2026 — o shell comia 272px de 720px numa tela de 13", 38% antes do conteúdo começar. `gap` em vez de `space-between` porque agora são três blocos (título, busca, ações) e não dois. */ height: 48px; display: flex; align-items: center; gap: 16px; padding: 0 20px; background: var(--surface); border-bottom: 1px solid transparent; box-shadow: var(--shadow-suave); position: sticky; top: 0; z-index: 10; } .topbar-search { /* margin-left: auto empurra a busca e tudo o que vem depois para a direita, deixando só o título à esquerda — o arranjo do Zoho. `flex-shrink` alto e `min-width` baixo fazem a BUSCA ser a primeira coisa a ceder quando a barra aperta. É sacrifício deliberado: ícone que some é função perdida, busca estreita continua servindo. */ display: flex; align-items: center; gap: 8px; padding: 6px 12px; margin-left: auto; border-radius: 999px; background: var(--surface-alt); color: var(--ink-soft); width: 260px; min-width: 120px; flex-shrink: 4; } .topbar-search svg { width: 16px; height: 16px; flex-shrink: 0; } .topbar-search input { border: none; background: none; padding: 0; font-size: 13px; width: 100%; } .topbar-search input:focus { box-shadow: none; } .topbar-actions { display: flex; align-items: center; gap: 10px; } .icon-btn { /* 30px numa barra de 48: 36 numa barra de 48 deixaria 6px de respiro em cima e embaixo, e a barra pareceria cheia até a borda. */ width: 30px; height: 30px; border-radius: 50%; border: none; background: transparent; color: var(--ink-soft); display: flex; align-items: center; justify-content: center; cursor: pointer; } .icon-btn:hover { background: var(--surface-alt); color: var(--ink); } .icon-btn svg { width: 18px; height: 18px; } .kanban-card-abrir { width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; color: var(--ink-soft); display: flex; align-items: center; justify-content: center; } .kanban-card-abrir:hover { background: var(--surface-alt); color: var(--primary); } .kanban-card-abrir svg { width: 16px; height: 16px; } .hamburger-btn { display: none; width: 36px; height: 36px; border-radius: 50%; border: none; background: transparent; color: var(--ink-soft); align-items: center; justify-content: center; cursor: pointer; } .hamburger-btn svg { width: 20px; height: 20px; } .ai-pill-btn { display: flex; align-items: center; gap: 6px; /* Altura alinhada ao .btn novo (7px/13px), senão ele fica um degrau acima dos vizinhos na mesma barra. */ padding: 7px 14px; border-radius: 999px; line-height: 1.4; /* Sem moldura, como os demais botões. A identidade roxa fica no FUNDO: ali a cor não é decoração, marca ação que envolve IA. */ border: 1px solid transparent; background: color-mix(in srgb, #7C5CFC 12%, var(--surface)); color: #7C5CFC; font-size: 13px; font-weight: 600; cursor: pointer; } .ai-pill-btn:hover { background: color-mix(in srgb, #7C5CFC 18%, var(--surface)); } .ai-pill-btn svg { width: 14px; height: 14px; } .ai-pill-btn:disabled { cursor: not-allowed; opacity: 0.5; } /* Enriquecimento com IA em andamento/pendente (18/09/2026): ícone redondo ao lado do botão "IA", mesma família roxa. Pisca enquanto a IA processa e continua piscando até as sugestões serem aprovadas/descartadas — por isso o mesmo visual serve aos dois estados (o tooltip diz qual). O `display` próprio anularia o atributo [hidden], então o esconder é explícito. */ .ai-status-btn { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border-radius: 50%; border: 1px solid transparent; cursor: pointer; background: color-mix(in srgb, #7C5CFC 12%, var(--surface)); color: #7C5CFC; animation: ai-status-piscar 1.2s ease-in-out infinite; } .ai-status-btn[hidden] { display: none; } .ai-status-btn svg { width: 16px; height: 16px; } .ai-status-btn:hover { background: color-mix(in srgb, #7C5CFC 22%, var(--surface)); } @keyframes ai-status-piscar { 0%, 100% { opacity: 1; box-shadow: 0 0 0 0 color-mix(in srgb, #7C5CFC 45%, transparent); } 50% { opacity: 0.45; box-shadow: 0 0 0 5px color-mix(in srgb, #7C5CFC 0%, transparent); } } /* Sem animação pra quem pediu movimento reduzido: fica só destacado (borda roxa) — o estado continua legível sem depender de piscar. */ @media (prefers-reduced-motion: reduce) { .ai-status-btn { animation: none; border-color: #7C5CFC; } } /* Mesmo formato de pílula do .ai-pill-btn ao lado, mas tom neutro/suave — "Editar Lead" não tem identidade de cor própria, só precisa ser menos discreto que texto solto. Pedido de Rocélio, 31/08/2026. */ .btn-pill-suave { display: flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; line-height: 1.4; border: 1px solid transparent; background: color-mix(in srgb, var(--ink) 7%, var(--surface)); color: var(--ink-soft); font-size: 13px; font-weight: 600; cursor: pointer; } .btn-pill-suave:hover { background: color-mix(in srgb, var(--ink) 12%, var(--surface)); color: var(--ink); } .lead-toolbar-acoes .btn-pill-suave { padding: 5px 12px; font-size: 12px; font-weight: 400; } /* Botão de ícone só (engrenagem do "Editar Layout") — mesmo tamanho/toque dos outros botões da barra, sem texto, tooltip via title= no HTML. */ .btn-icone-suave { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: var(--radius-sm); border: 1px solid transparent; background: color-mix(in srgb, var(--ink) 7%, var(--surface)); color: var(--ink-soft); cursor: pointer; } .btn-icone-suave:hover { background: color-mix(in srgb, var(--ink) 12%, var(--surface)); color: var(--ink); } .btn-icone-suave svg { width: 15px; height: 15px; } /* Texto de célula que NUNCA quebra: a linha da tabela mantém a mesma altura qualquer que seja o conteúdo (pedido de Rocélio, 10/10/2026, depois de ver uma linha de formulário com 7 linhas de texto). É a mesma receita de "Título nunca quebra em duas linhas" (CLAUDE.md), aplicada à célula: nowrap + overflow + reticências, e o limite de largura vem de `--max`, que cada tela define inline (ex.: style="--max: 460px;"). `display: block` é o que faz o max-width valer dentro de . Sempre com `title=` no elemento, para o texto inteiro aparecer no hover. */ .celula-uma-linha { display: block; max-width: var(--max, 320px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } /* Ações de uma linha de tabela, lado a lado. O
do botão de envio não pode empurrar nada: sem margem, e os filhos não encolhem. */ .acoes-linha { display: flex; align-items: center; gap: 4px; } .acoes-linha > * { flex-shrink: 0; } .acoes-linha form { margin: 0; } /* Ocupa o lugar de uma ação que não existe nesta linha (mesmas medidas do .btn-icone-suave), para as ações restantes alinharem na coluna. */ .acoes-linha .acao-vazia { width: 28px; height: 28px; } /* Janela de detalhes do menu Formulários. `pre-wrap` na mensagem preserva as quebras de linha que o visitante digitou, sem virar HTML. */ .entrada-mensagem { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.55; background: var(--surface-alt); border-radius: var(--radius-sm); padding: 12px 14px; margin: 8px 0 12px; } .entrada-campos { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; font-size: 13px; } .entrada-campos dt { color: var(--ink-soft); } .entrada-campos dd { margin: 0; overflow-wrap: anywhere; white-space: pre-wrap; } /* Ícone de prazo de tarefa — três estados calculados por status_prazo_tarefa (concluída x prazo), não um campo gravado. Reaproveitado na grade de Tarefas do Lead e na Lista/Kanban do módulo geral (07/09/2026, ver §30 do reutilizável): mesma classe, tanto em cima de (só leitura) quanto de .btn-icone-suave (clicável, na ficha do Lead) — as regras de cor abaixo vêm depois de .btn-icone-suave na cascata de propósito, pra vencer o cinza padrão dele quando as duas classes se combinam no mesmo elemento. */ .icone-status-prazo { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; flex-shrink: 0; } .icone-status-prazo svg { width: 100%; height: 100%; } .icone-status-prazo-no_prazo { color: var(--success); } .icone-status-prazo-atrasada { color: var(--error); } .icone-status-prazo-pendente { color: var(--ink-soft); } /* Badge do status de FLUXO (coluna do Kanban) colado no Título da grade de Tarefas do Lead — diferente do ícone de prazo acima, que é sobre prazo, não sobre em qual coluna a tarefa está. A cor vem do banco (tarefas_status.cor, inline no HTML); currentColor deixa o fundo sempre uma versão clara da mesma cor, sem precisar de uma regra CSS por status. */ .badge-status-fluxo { margin-left: 6px; font-weight: 500; background: color-mix(in srgb, currentColor 15%, var(--surface)); } .mode-switch { display: flex; gap: 2px; background: var(--surface-alt); border-radius: 999px; padding: 3px; } .mode-btn { width: 30px; height: 30px; border-radius: 50%; border: none; background: transparent; color: var(--ink-soft); cursor: pointer; font-size: 14px; } .mode-btn.active { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); } .palette-picker { position: relative; } .palette-picker-panel { display: none; position: absolute; right: 0; top: 44px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow); padding: 6px; min-width: 220px; z-index: 20; } .palette-picker-panel.open { display: block; } @media (max-width: 1023px) { .palette-picker-panel { max-width: calc(100vw - 24px); } } .notification-picker { position: relative; } .notification-picker-panel { display: none; position: absolute; right: 0; top: 44px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow); padding: 6px; min-width: 280px; max-width: 340px; max-height: 360px; overflow-y: auto; z-index: 20; } .notification-picker-panel.open { display: block; } .notification-item { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: var(--radius-sm); color: var(--ink); text-decoration: none; font-size: 13px; } .notification-item:hover { background: var(--surface-alt); } .notification-item.unread { font-weight: 600; background: color-mix(in srgb, var(--primary) 8%, transparent); } .notification-item-data { font-size: 11px; color: var(--ink-soft); font-weight: 400; } .notification-marcar-todas { width: 100%; margin-top: 4px; padding: 8px; border: none; background: none; color: var(--primary); font-size: 12px; cursor: pointer; text-align: center; } .notification-vazio { padding: 12px; font-size: 13px; color: var(--ink-soft); text-align: center; margin: 0; } @media (max-width: 1023px) { .notification-picker-panel { max-width: calc(100vw - 24px); } } .palette-option-form { margin: 0; } .palette-option { width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: none; background: none; border-radius: var(--radius-sm); cursor: pointer; font-size: 13px; color: var(--ink); text-align: left; } .palette-option:hover { background: var(--surface-alt); } .palette-option.selected { background: color-mix(in srgb, var(--primary) 12%, transparent); font-weight: 600; } .palette-swatches { display: flex; gap: 3px; } .swatch { width: 12px; height: 12px; border-radius: 50%; border: 1px solid rgba(0,0,0,0.1); } .palette-name { flex: 1; } .palette-check { color: var(--primary); } .online-users-stack { display: flex; } .online-avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--primary); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; border: 2px solid var(--surface); margin-left: -8px; position: relative; } .online-avatar:first-child { margin-left: 0; } .online-dot { position: absolute; bottom: -2px; right: -2px; width: 11px; height: 11px; border-radius: 50%; background: var(--success); border: 2px solid var(--surface); } .online-avatar-more { background: var(--surface-alt); color: var(--ink-soft); } /* Inativo = navegador aberto, sem ação real além do limite de Configurações > Presença e sessão. Esmaecer o avatar e trocar a bolinha para cinza diz isso sem texto; o motivo e a hora da última ação ficam no tooltip. */ .online-avatar-inativo { opacity: 0.55; } .online-dot-inativo { background: var(--ink-soft); } .notification-badge { position: absolute; top: 4px; right: 4px; min-width: 14px; height: 14px; border-radius: 999px; background: var(--error); color: #fff; font-size: 9px; display: flex; align-items: center; justify-content: center; padding: 0 3px; } .user-chip { display: flex; align-items: center; gap: 10px; } .user-avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--secondary); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; flex-shrink: 0; } .user-meta { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; } /* Sem cor própria de propósito: herda de .sidebar (color-mix com --sidebar-ink), que já é a cor certa pro fundo escuro da sidebar — mudou de lugar em 02/09/2026, era herdada do topbar claro antes. */ .user-name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Mesmo tom de "texto secundário" que .tagline já usa na sidebar — antes era --ink-soft, pensado pro fundo claro do topbar. */ .user-role { font-size: 11px; color: color-mix(in srgb, var(--sidebar-ink) 50%, transparent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ---------- Conteúdo ---------- */ /* padding-top menor que as laterais: o respiro de cima competia com a divisória da topbar, que já separa visualmente. Vale para todas as telas — padrão de layout é do app, não da página. */ /* padding-left reduzido pela metade (32px -> 16px), só do lado esquerdo — pedido de Rocélio, 02/09/2026: distância grande demais entre o menu lateral e o início do corpo da página. Direita/topo/base sem mudança. */ .content { padding: 12px 32px 24px 16px; } /* Título e barra mais perto do topo: era 24px aqui somados aos 28px de respiro do .content, empurrando o conteúdo útil para baixo em toda tela de listagem. */ .page-header { margin-bottom: 16px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; } .page-subtitle { color: var(--ink-soft); font-size: 14px; margin: 0; } /* ---- Abaixo de 1024px (tablet + celular): comportamento compartilhado da gaveta aberta (usado pelo toque num item com submenu no rail do tablet — Task 3 — e pelo ☰ no celular) ---- */ @media (max-width: 1023px) { .sidebar-collapse-btn { display: none; } .app-shell.mobile-drawer-open .sidebar-scrim { display: block; } .app-shell.mobile-drawer-open .drawer-close-btn { display: flex; } .app-shell.mobile-drawer-open .sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: 260px; z-index: 200; } .app-shell.mobile-drawer-open .sidebar .masthead-top { justify-content: space-between; } .app-shell.mobile-drawer-open .sidebar .brand-block, .app-shell.mobile-drawer-open .sidebar .tagline { display: block; } .app-shell.mobile-drawer-open .sidebar .menu-label-text, .app-shell.mobile-drawer-open .sidebar .soon-badge { display: inline; } .app-shell.mobile-drawer-open .sidebar .menu-item { justify-content: flex-start; padding: 11px 12px; } } /* ---- Tablet (768px-1023px): rail de ícones de 72px sempre visível por padrão — mesmo visual do `.sidebar-collapsed` manual do desktop, mas automático e sem depender de localStorage. ---- */ @media (min-width: 768px) and (max-width: 1023px) { .app-shell { grid-template-columns: 72px 1fr; } .app-shell.mobile-drawer-open > div:not(.sidebar-scrim) { grid-column: 2; } .content { padding: 24px; } .sidebar .masthead-top { justify-content: center; } .sidebar .brand-block, .sidebar .tagline, .sidebar .menu-label-text, .sidebar .soon-badge { display: none; } .sidebar .menu-item { justify-content: center; padding: 11px 0; } } /* ---- Celular (abaixo de 768px): sidebar totalmente fora da tela até a gaveta ser aberta pelo ☰. ---- */ @media (max-width: 767px) { .hamburger-btn { display: flex; } .app-shell, .app-shell.sidebar-collapsed { grid-template-columns: 1fr; } .content { padding: 16px; } .topbar-search { display: none; } .user-meta { display: none; } .mode-switch { flex-shrink: 0; } .online-users-stack { display: none; } .topbar { padding-left: 16px; padding-right: 16px; } .topbar-actions { gap: 6px; } .sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: 260px; z-index: 200; transform: translateX(-100%); transition: transform 0.2s ease; } .app-shell.mobile-drawer-open .sidebar { transform: translateX(0); } } /* ---------- Indicadores e cartões ---------- */ .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 24px; } .stat-tile { background: var(--surface); border: 1px solid transparent; box-shadow: var(--shadow-suave); border-radius: var(--radius); padding: 18px 20px; display: flex; flex-direction: column; gap: 6px; } .stat-label { font-size: 13px; color: var(--ink-soft); } .stat-value { font-family: var(--font-display); font-size: 28px; font-weight: 600; } .card { background: var(--surface); border: 1px solid transparent; border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow-suave); } .card-header { margin-bottom: 14px; } .card-header h2 { font-size: 18px; margin: 0; } /* Box da chave em texto puro (templates/formularios/index.html) — some da tela depois do primeiro request, então precisa chamar atenção: fundo e borda em --success (o card em volta já sinaliza "sucesso", isto marca o valor que precisa ser copiado agora). Fonte monoespaçada pra facilitar conferir caractere a caractere, e wrap pra chave longa não vazar do card. */ .chave-gerada-box { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: color-mix(in srgb, var(--success) 12%, var(--surface)); border: 1px solid var(--success); border-radius: var(--radius); padding: 12px 16px; margin-top: 8px; } .chave-gerada-box code { font-family: var(--font-mono, monospace); font-size: 14px; word-break: break-all; } .feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; } /* Tela /contatos/, visão Cards — grid de tamanho automático, mesmo raciocínio de .feature-grid; card individual reaproveita .card (fundo/borda/sombra já definidos ali), só acrescenta clique. Só nome + empresa (pedido de Rocélio, 12/09/2026) — sem data de atualização nem cargo no card. */ .contatos-cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; } .contatos-card { cursor: pointer; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .contatos-card:hover { border-color: var(--primary); box-shadow: var(--shadow); } /* Nome do contato como gatilho pra abrir o histórico (Lista ou Cards) —