/* ═══════════════════════════════════════════════════════════ FUEL MIND: Dark Design System v3.1 Layout: Sidebar + Header + Content Fonts: Syne (headings) + DM Sans (body) + JetBrains Mono (numbers) Theme: Dark default | Light toggle v3.1: Cobertura completa de --primary (sem hardcodes de vinho) ═══════════════════════════════════════════════════════════ */ /* Fontes carregadas por no index.html: dentro do CSS o navegador só descobre a fonte depois de baixar o arquivo inteiro (17/09/2026). */ /* ── TOKENS DARK (DEFAULT), Ultra Dark ── */ :root { --bg: #0a0a0a; /* fundo principal quase preto */ --surface: #151515; /* cards, superfícies elevadas */ --surface-alt: #1e1e1e; /* alternativo, um pouco mais claro */ --surface-raised: #202020; /* elementos em destaque */ --surface-hover: #2a2a2a; /* hover sobre superfícies */ --sidebar-bg: #0c0c0c; /* sidebar mais escura que o fundo */ --sidebar-width: 260px; /* Altura da faixa de demonstração. Zero fora do modo demo; o próprio demo.js mede a faixa e sobrescreve, porque ela quebra em duas linhas no celular e um valor fixo deixaria a sidebar desalinhada. */ --faixa-demo-h: 0px; --header-height: 64px; --header-bg: #0a0a0a; --text: #f5f5f5; /* texto principal branco suave */ --text-muted: #aaaaaa; /* texto secundário */ --text-light: #888888; /* texto ainda mais suave */ --text-on-dark: #f8fafc; --primary: #a02828; /* tom vinho (pode ajustar) */ /* O vinho da marca como TEXTO sobre fundo escuro: #a02828 sobre #151515 dá contraste 2,3: ilegível. Vale só para texto (etiqueta de papel, @usuario, aba ativa, seta de ordenação); preenchimentos e botões continuam no --primary. No tema claro os dois são a mesma cor. (21/09/2026) */ --primary-texto: #d06a6a; /* Cor do contorno de foco (23/09/2026). Era o --primary, e o vinho sobre o fundo escuro dá de 1,9 a 2,7 de contraste: abaixo dos 3 que um indicador precisa para ser visto, e quem anda pelo teclado perdia o lugar. O --primary-texto dá de 4,1 a 5,6 nos seis fundos escuros; no tema claro ele é o próprio vinho (6,3 a 7,4). Por apontar para ele, este token troca sozinho com o tema. */ --foco: var(--primary-texto); --primary-hover: #8c2222; /* escurecido ~12%, feedback visual de hover */ --primary-light: rgba(139,34,82,0.2); --primary-glow: rgba(139,34,82,0.4); --primary-mid: #b84040; /* clareado ~15%, para ícones, labels secundários */ /* Derivadas de --primary usadas em badges e superfícies sutis. Quando o usuário altera --primary via aplicarCorPersonalizada(), essas três variáveis são recalculadas via JS para manter consistência. */ --primary-subtle: rgba(139,34,82,0.1); /* fundos de badge/ícone leve */ --primary-subtle2: rgba(139,34,82,0.08); /* itens ativos na sidebar (light) */ --primary-subtle3: rgba(139,34,82,0.15); /* badge-role-supremo */ --primary-subtle4: rgba(139,34,82,0.18); /* hover badge empresa */ --border: #333333; /* bordas padrão */ --border-light: #262626; /* bordas mais sutis */ --border-strong: #444444; /* bordas de destaque */ --success: #10b981; --success-light: rgba(16,185,129,0.15); --warning: #f59e0b; --warning-light: rgba(245,158,11,0.15); /* Clareado em 21/09: como TEXTO sobre a propria tonalidade escura (--danger-light) o #ef4444 dava 4,17, abaixo de 4,5. O preenchimento de botao nao usa mais esta variavel, entao clarear e seguro. */ --danger: #f26a6a; /* O --danger é claro de propósito: ele é texto sobre fundo escuro. Como FUNDO de botão com texto branco dá só 3,76 de contraste, então o preenchimento usa este tom sólido, igual nos dois temas (branco sobre ele: 6,5). (21/09/2026) */ --danger-solido: #b02a37; --danger-light: rgba(239,68,68,0.15); /* Mesmo caso do --danger: como texto sobre --info-light dava 4,17. */ --info: #5a9bf8; --info-solido: #1c6f9c; /* preenchimento com texto branco (5,5) */ --info-light: rgba(59,130,246,0.15); /* A quinta cor dos cards (24/09/2026): o card de frete do Dashboard repetia o vermelho do primeiro. Roxo de matiz 270, longe do azul (215): 6,9 sobre o card e 5,5 sobre o fundo do ícone. */ --violeta: #c084fc; --violeta-light: rgba(192,132,252,0.15); --thead-bg: #0a0a0a; --thead-color: #c4d0de; --row-hover: #252525; --row-alt: #181818; --shadow-sm: 0 1px 3px rgba(0,0,0,0.6); --shadow: 0 4px 12px rgba(0,0,0,0.7); --shadow-md: 0 8px 24px rgba(0,0,0,0.8); --shadow-lg: 0 16px 48px rgba(0,0,0,0.9); --shadow-glow: 0 0 24px rgba(139,34,82,0.3); --radius-sm: 4px; --radius: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 20px; --export-bg: #151515; --export-border: #333333; /* ── MOVIMENTO ────────────────────────────────────────────────── Três durações e uma curva, para a ferramenta ter um ritmo só. O arquivo tinha sete durações soltas; as novas entram por aqui. Regra: animar transform e opacity, nunca largura, altura ou margem. E nada longo numa ação que se repete trinta vezes por dia, como lançar nota. */ --duration-fast: 0.12s; /* estado de botão, hover, foco */ --duration-base: 0.2s; /* abrir lista, trocar aba */ --duration-slow: 0.3s; /* entrada de tela e de modal */ --ease-standard: cubic-bezier(0.2, 0, 0.2, 1); /* ── ESPAÇAMENTO (programa 3.3, 18/09/2026) ──────────────────── Uma escala só, de 4 em 4. O arquivo usava 6, 7, 10, 14, 18 e 22 ao lado de 8, 12, 16, 20 e 24; o que sai do estilo inline entra por aqui, arredondado para o degrau mais perto. */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 28px; --space-8: 32px; } /* Quem pede menos movimento no sistema operacional recebe menos movimento aqui. Antes não havia nenhuma ocorrência desta regra no projeto: as três animações rodavam sempre. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ── TOKENS LIGHT (mantido, mas com ajustes de contraste) ── */ [data-theme="light"] { --bg: #ffffff; --surface: #f8f9fa; --surface-alt: #f1f3f5; --surface-raised: #ffffff; --surface-hover: #e9ecef; --sidebar-bg: #212529; --header-bg: #ffffff; --text: #212529; /* Escurecidos em 21/09/2026. Os anteriores (#6c757d e #868e96) davam contraste 4,22 e 2,99 sobre --surface-alt, abaixo do mínimo de 4,5 para texto normal, e são usados em rótulos de 9 a 11 px nas dez telas. A hierarquia entre os dois continua visível. */ --text-muted: #5c646c; --text-light: #6b737b; --text-on-dark: #f8f9fa; --primary: #a02828; --primary-texto: #a02828; /* no claro o vinho já se lê bem (7,4 sobre branco) */ --primary-hover: #a02828; --primary-light: #a028281c; --primary-glow: rgba(139,34,34,0.15); --primary-mid: #b04a4a; --primary-subtle: rgba(139,34,34,0.08); --primary-subtle2: rgba(139,34,34,0.06); --primary-subtle3: rgba(139,34,34,0.12); --primary-subtle4: rgba(139,34,34,0.14); --border: #dee2e6; --border-light: #e9ecef; --border-strong: #ced4da; --success: #0c6b4b; --success-light: rgba(12,107,75,0.08); --warning: #9c4e08; /* escurecido em 21/09: 4,05 -> 5,1 sobre --warning-light */ --warning-light: rgba(180,91,10,0.08); --danger: #b02a37; --danger-light: rgba(176,42,55,0.08); --info: #1c6f9c; --info-light: rgba(28,111,156,0.08); --violeta: #7e22ce; /* 6,6 sobre o card e 5,8 sobre o fundo do ícone */ --violeta-light: rgba(126,34,206,0.08); --thead-bg: rgb(224, 224, 224); --thead-color: #212529; --row-hover: #f1f3f5; --row-alt: #fcfcfd; --shadow-sm: 0 1px 2px rgba(0,0,0,0.05); --shadow: 0 4px 8px rgba(0,0,0,0.08); --shadow-md: 0 8px 16px rgba(0,0,0,0.10); --shadow-lg: 0 16px 24px rgba(0,0,0,0.12); --shadow-glow: 0 0 12px rgba(139,34,34,0.15); --export-bg: #f8f9fa; --export-border: #dee2e6; } /* ── RESET ── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* `color-scheme` faz o navegador desenhar os controles NATIVOS no tom do tema: a caixa de marcar desmarcada deixa de ter fundo branco no escuro, e a barra de rolagem e o calendario acompanham. E a forma certa de resolver isso: `accent-color` so pinta o estado marcado. (21/09/2026) */ :root { color-scheme: dark; } [data-theme="light"] { color-scheme: light; } html { font-size: 14px; -webkit-font-smoothing: antialiased; scroll-behavior: smooth; } body { font-family: 'DM Sans', 'Segoe UI', system-ui, sans-serif; background: var(--bg); color: var(--text); line-height: 1.5; min-height: 100vh; overflow-x: hidden; transition: background 0.3s, color 0.3s; } /* ══ LAYOUT ══════════════════════════════════════ */ .app-wrapper { display: flex; min-height: 100vh; } /* ── SIDEBAR ── */ .sidebar { width: var(--sidebar-width); min-height: calc(100vh - var(--faixa-demo-h)); background: var(--sidebar-bg); border-right: 1px solid rgba(255,255,255,0.06); display: flex; flex-direction: column; position: fixed; left: 0; top: var(--faixa-demo-h); bottom: 0; z-index: 200; transition: transform 0.3s cubic-bezier(0.4,0,0.2,1); overflow: hidden; overflow-y: auto; } .sidebar::-webkit-scrollbar { width: 3px; } .sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 3px; } /* A MESMA ALTURA DA BARRA DE CIMA (22/09/2026). A area da logo tinha 83px contra os 64px do cabecalho, e as duas tem uma linha embaixo: eram dois riscos horizontais separados por 19px, perto demais para parecer intencao e longe demais para passar despercebido. Com a altura igual eles viram um risco so, atravessando a tela, e a barra lateral passa a ser lida junto com o conteudo em vez de ao lado dele. `height` e nao `padding`: e a altura que precisa casar com a do cabecalho, e amarrar as duas na mesma variavel e o que mantem isso verdade se ela mudar. A logo tem 40px, entao sobram 12px em cima e embaixo. */ .sidebar-logo { display: flex; align-items: center; gap: 13px; height: var(--header-height); padding: 0 18px; border-bottom: 1px solid rgba(255,255,255,0.06); text-decoration: none; flex-shrink: 0; } .sidebar-logo-icon { width: 42px; height: 42px; background: var(--primary); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 4px 16px var(--primary-glow); transition: transform 0.2s, box-shadow 0.2s; } .sidebar-logo:hover .sidebar-logo-icon { transform: scale(1.05); box-shadow: 0 6px 20px var(--primary-glow); } .sidebar-logo-icon svg { width: 22px; height: 22px; color: #fff; } .sidebar-logo-title { font-family: 'Syne', sans-serif; font-size: 0.95rem; font-weight: 800; color: #f8fafc; white-space: nowrap; letter-spacing: -0.01em; line-height: 1.2; } .sidebar-logo-sub { font-size: 0.86rem; color: rgba(255,255,255,0.35); text-transform: uppercase; letter-spacing: 0.1em; margin-top: 2px; white-space: nowrap; } .sidebar-nav { flex: 1; padding: 10px 0; } .sidebar-section { padding: 0 10px; margin-bottom: 2px; } .sidebar-item { display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: var(--radius); cursor: pointer; transition: background 0.15s, color 0.15s; margin-bottom: 1px; border: none; background: transparent; color: rgba(255,255,255,0.68); font-family: 'DM Sans', sans-serif; /* 1rem, nao 0.875rem (22/09/2026). A raiz deste projeto e 14px, entao 0.875rem dava 12,25px de texto dentro de um item de 240px de largura: o conteudo boiava na area e quase metade da barra ficava vazia. A razao entre o tamanho da fonte e a largura da coluna era de 4,7%, contra os 5,8% de uma barra de 240px com texto de 14px, que e a proporcao das ferramentas que servem de referencia. A largura de 260px NAO mudou, de proposito: ela ja esta dentro da faixa usada por elas, de 240 a 280. Quem estava fora do padrao era o texto. */ font-size: 1rem; font-weight: 500; width: 100%; text-align: left; white-space: nowrap; overflow: hidden; position: relative; } .sidebar-item:hover { background: rgba(255,255,255,0.09); color: rgba(255,255,255,0.93); } .sidebar-item.ativo { background: var(--primary-light); color: #a02828; font-weight: 600; } /* A MARCA DO ITEM ATIVO CRESCE, em vez de piscar (22/09/2026). Ela existia so sob `.ativo`, entao nascia e morria junto com a classe e nao havia estado anterior para transicionar: aparecia de uma vez. Agora o pseudo-elemento existe em todos os itens, encolhido em `scaleY(0)`, e so estica no que esta ativo. `transform` e nao `height`: a altura recalcularia layout a cada quadro, a escala a GPU compoe sozinha. E quem pede menos movimento no sistema ja e atendido pela regra global de `prefers-reduced-motion`. */ .sidebar-item::before { content: ''; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px; background: var(--primary); border-radius: 0 3px 3px 0; transform: scaleY(0); transition: transform 0.18s cubic-bezier(0.4, 0, 0.2, 1); } .sidebar-item.ativo::before { transform: scaleY(1); } .sidebar-item-icon { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; opacity: 0.6; transition: opacity 0.15s; } .sidebar-item:hover .sidebar-item-icon, .sidebar-item.ativo .sidebar-item-icon { opacity: 1; } .sidebar-item svg { width: 17px; height: 17px; } .sidebar-item-label { overflow: hidden; text-overflow: ellipsis; } /* Separa os grupos por ESPACO, sem risco (22/09/2026). A linha saiu junto com os rotulos: com quatro riscos e quatro titulos, o menu tinha mais moldura do que conteudo. O nome da classe fica, porque e citado no HTML e trocar so renomearia a mesma coisa. */ .sidebar-divider { height: 16px; } /* ── MAIN AREA ── */ .main-area { margin-left: var(--sidebar-width); flex: 1; display: flex; flex-direction: column; min-width: 0; transition: margin-left 0.3s cubic-bezier(0.4,0,0.2,1); } /* ── HEADER ── */ .app-header { height: var(--header-height); background: var(--header-bg); border-bottom: 1px solid var(--border-light); display: flex; align-items: center; padding: 0 28px; position: sticky; top: var(--faixa-demo-h); z-index: 100; gap: 14px; } [data-theme="light"] .app-header { box-shadow: var(--shadow-sm); } .btn-hamburger { display: none; background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 6px; border-radius: var(--radius); transition: background 0.15s, color 0.15s; } .btn-hamburger:hover { background: var(--surface-hover); color: var(--text); } .btn-hamburger svg { width: 22px; height: 22px; display: block; } .header-page-title { font-family: 'Syne', sans-serif; font-size: 1.3rem; font-weight: 700; color: var(--text); letter-spacing: -0.02em; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .header-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .header-action-btn { width: 36px; height: 36px; border-radius: var(--radius); background: var(--header-bg); border: 1px solid var(--border-light); color: var(--text-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.15s; font-family: inherit; font-size: 0.9rem; } .header-action-btn:hover { background: var(--surface-hover); color: var(--text); border-color: var(--border-strong); } .header-action-btn svg { width: 17px; height: 17px; } /* Busca global expandida no header */ .btn-busca-global { display: flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: var(--radius); background: var(--header-bg); border: 1px solid var(--border); color: var(--text-muted); cursor: pointer; font-family: inherit; font-size: 0.893rem; font-weight: 500; transition: all 0.18s; min-width: 140px; } .btn-busca-global:hover { background: var(--surface-hover); border-color: var(--primary); color: var(--text); box-shadow: 0 0 0 2px var(--primary-glow); } /* ===================================================== LOGO FUEL MIND - Alternância por tema ===================================================== */ .sidebar-logo-img { height: 40px; width: auto; max-width: 180px; display: block; margin-left: auto; margin-right: auto; } /* Versão reduzida para mobile */ @media (max-width: 768px) { .sidebar-logo-img { height: 32px; max-width: none; } } .btn-busca-global span { white-space: nowrap; } @media (max-width: 768px) { .btn-busca-global span { display: none; } .btn-busca-global { min-width: unset; padding: 7px 10px; } } .header-datetime { font-size: 0.893rem; color: var(--text-light); font-family: 'JetBrains Mono', monospace; white-space: nowrap; } /* ── CONTENT AREA ── */ .content-area { flex: 1; padding: 28px 28px 60px; overflow-x: hidden; } /* ── OVERLAY MOBILE ── */ .sidebar-overlay { display: none; position: fixed; inset: var(--faixa-demo-h) 0 0 0; background: rgba(0,0,0,0.6); z-index: 199; backdrop-filter: blur(3px); } .sidebar-overlay.visivel { display: block; } /* ══ TELAS ══════════════════════════════════════ */ .tela { display: none; animation: fadeSlideIn 0.22s ease; max-width: 1400px; } @keyframes fadeSlideIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .tela h2 { font-family: 'Syne', sans-serif; font-size: 1.5rem; font-weight: 700; color: var(--text); letter-spacing: -0.02em; margin-bottom: 24px; } .tela h3 { font-size: 0.86rem; font-weight: 700; color: var(--text-light); text-transform: uppercase; letter-spacing: 0.12em; margin: 28px 0 12px; } /* ══ KPI CARDS ══════════════════════════════════ */ .kpi-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; margin-bottom: 28px; } .kpi-card { background: var(--surface); border: 1px solid var(--border-light); border-radius: var(--radius-lg); padding: 22px 22px 18px; position: relative; overflow: hidden; transition: transform 0.2s, box-shadow 0.2s; box-shadow: var(--shadow-sm); } .kpi-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); } .kpi-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--primary); border-radius: 4px 0 0 4px; } .kpi-card::after { content: ''; position: absolute; right: -20px; top: -20px; width: 90px; height: 90px; border-radius: 50%; background: var(--primary); opacity: 0.05; transition: opacity 0.2s; } .kpi-card:hover::after { opacity: 0.1; } .kpi-card.verde::before { background: var(--success); } .kpi-card.verde::after { background: var(--success); } .kpi-card.laranja::before{ background: var(--warning); } .kpi-card.laranja::after { background: var(--warning); } .kpi-card.roxo::before { background: var(--info); } .kpi-card.roxo::after { background: var(--info); } .kpi-card.violeta::before { background: var(--violeta); } .kpi-card.violeta::after { background: var(--violeta); } .kpi-icon { width: 42px; height: 42px; border-radius: var(--radius); background: var(--primary-light); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; } .kpi-icon svg { width: 20px; height: 20px; color: var(--primary-mid); } .kpi-card.verde .kpi-icon { background: var(--success-light); } .kpi-card.verde .kpi-icon svg { color: var(--success); } .kpi-card.laranja .kpi-icon { background: var(--warning-light); } .kpi-card.laranja .kpi-icon svg { color: var(--warning); } .kpi-card.roxo .kpi-icon { background: var(--info-light); } .kpi-card.roxo .kpi-icon svg { color: var(--info); } .kpi-card.violeta .kpi-icon { background: var(--violeta-light); } .kpi-card.violeta .kpi-icon svg { color: var(--violeta); } .kpi-valor { font-family: 'Syne', sans-serif; font-size: 1.85rem; font-weight: 700; color: var(--text); line-height: 1; margin-bottom: 6px; letter-spacing: -0.03em; } .kpi-label { font-size: 0.86rem; text-transform: uppercase; letter-spacing: 0.09em; color: var(--text-light); font-weight: 700; } /* De que data é o número (rodada 11): o Dashboard mostra volume pela descarga e compra pela emissão, e cada card diz qual. */ .kpi-base { font-size: 0.86rem; color: var(--text-muted); margin-top: 4px; } .kpi-delta { display: inline-flex; align-items: center; gap: 3px; font-size: 0.893rem; font-weight: 700; margin-top: 10px; padding: 3px 9px; border-radius: 20px; } .kpi-delta.positivo { background: var(--success-light); color: var(--success); } .kpi-delta.negativo { background: var(--danger-light); color: var(--danger); } .kpi-delta.neutro { background: var(--surface-alt); color: var(--text-light); } .kpi-delta svg { width: 12px; height: 12px; } /* ══ ALERTAS ══════════════════════════════════ */ .alertas-container { display: grid; gap: 8px; margin-bottom: 22px; } .alertas-resumo { margin: 0; } .alertas-mais { justify-self: start; } .alerta-card { background: var(--surface); border-left: 4px solid var(--warning); border-radius: var(--radius); padding: 12px 16px; font-size: 0.875rem; color: var(--text); display: flex; align-items: center; gap: 10px; border: 1px solid var(--border-light); border-left-color: var(--warning); } .alerta-card.critico { border-left-color: var(--danger); } .alerta-card::before { content: '⚠'; flex-shrink: 0; } .alerta-card.critico::before { color: var(--danger); } .alerta-clicavel { justify-content: space-between; } .alerta-corpo { cursor: pointer; flex: 1; padding: 2px 0; } .alerta-corpo:hover { opacity: 0.85; } .alerta-link { font-size: 0.893rem; color: var(--primary); margin-left: 8px; font-weight: 600; } .alerta-ignorar { background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 4px 10px; font-size: 0.893rem; color: var(--text-muted); cursor: pointer; white-space: nowrap; transition: all 0.15s; } .alerta-ignorar:hover { background: var(--success); color: #fff; border-color: var(--success); } /* ══ CARD / SEÇÃO ════════════════════════════ */ .card { background: var(--surface); border: 1px solid var(--border-light); border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--shadow-sm); margin-bottom: 20px; } .card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; gap: 12px; flex-wrap: wrap; } .card-title { font-family: 'Syne', sans-serif; font-size: 1rem; font-weight: 700; color: var(--text); letter-spacing: -0.01em; } .sistema-secao { background: var(--surface); border: 1px solid var(--border-light); border-radius: var(--radius-lg); padding: 22px 24px; margin-bottom: 16px; box-shadow: var(--shadow-sm); } .sistema-secao h3 { margin-top: 0; margin-bottom: 10px; color: var(--text); font-family: 'Syne', sans-serif; font-size: 0.95rem; text-transform: none; letter-spacing: 0; font-weight: 700; } .sistema-acoes { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; flex-direction: column; } /* Correções em massa: sete botões iguais em grade, não uma coluna de sete linhas (vistoria de 28/09/2026). */ .sistema-acoes--grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); align-items: stretch; } .sistema-acoes--grade > button { justify-content: center; } .zona-perigo { border-color: var(--danger); background: var(--danger-light); } .info-sistema { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-bottom: 16px; } /* O aviso de espaço em disco é concatenado na frente dos cartões e vira filho direto desta grade: sem isto ele fica espremido numa célula de 150 px, com título, lista e explicação dentro. (21/09/2026) */ .info-sistema > .faixa-validacao { grid-column: 1 / -1; } /* Cartão de número pequeno (Sistema, Conferência): rótulo em cima, número embaixo, como os cartões das outras telas. É `column-reverse` porque no HTML o número vem antes. O número não quebra linha ("L" sozinho). */ .info-card { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 6px; background: var(--surface-alt); border: 1px solid var(--border-light); border-radius: var(--radius-md); padding: 14px 16px; text-align: left; min-width: 0; } .info-card-valor { font-family: 'Syne', sans-serif; font-size: 1.3rem; font-weight: 700; color: var(--text); line-height: 1.2; letter-spacing: -0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .info-card-label { font-size: 0.86rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); font-weight: 700; } /* ══ FORMULÁRIOS ════════════════════════════ */ .form-linha { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; } .form-linha input { flex: 1; min-width: 200px; } .form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; margin-bottom: 24px; } .campo { display: flex; flex-direction: column; gap: 6px; } .campo label { font-size: 0.86rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.09em; } /* Marcador de campo obrigatório: asterisco sutil na cor de perigo */ .campo-obrigatorio { color: var(--danger); font-size: 0.893rem; font-weight: 700; margin-left: 2px; vertical-align: middle; opacity: 0.75; } input, select, textarea { padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--radius); font-size: 0.9rem; width: 100%; background: var(--surface-alt); color: var(--text); transition: border-color 0.2s, box-shadow 0.2s, background 0.2s; font-family: inherit; -webkit-appearance: none; appearance: none; line-height: 1.4; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-glow); background: var(--surface); } input::placeholder { color: var(--text-light); } select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2364748b' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 34px; cursor: pointer; } textarea { resize: vertical; min-height: 80px; } input[type="month"], input[type="date"] { font-family: 'JetBrains Mono', monospace; font-size: 0.93rem; } input[type="checkbox"] { width: auto; padding: 0; cursor: pointer; accent-color: var(--primary); } /* ══ LINKS ═══════════════════════════════════ */ /* O site não tinha regra nenhuma para `a`. A única que existia era a da faixa de validação, então os poucos links soltos (os anexos do detalhe da nota e o "Cancelar edição" do banner) saíam no azul padrão do navegador (#0000EE). No tema escuro isso é azul sobre preto, ilegível. Achado em 21/09/2026, montando na memória uma nota com anexo: o demo não tem nenhuma, e por isso nunca tinha aparecido. */ a { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; } a:hover { color: var(--primary-hover); } /* Dentro de uma faixa colorida o link toma a cor da faixa, não a da marca. */ .banner-edicao a { color: inherit; } /* ══ BOTÕES ══════════════════════════════════ */ button { padding: 9px 18px; border: none; border-radius: var(--radius); cursor: pointer; font-size: 0.875rem; font-weight: 600; font-family: inherit; letter-spacing: 0.01em; transition: all 0.2s ease; white-space: nowrap; display: inline-flex; align-items: center; gap: 7px; } .btn-primario { background: var(--primary); color: #fff; box-shadow: 0 2px 10px var(--primary-glow); } .btn-primario:hover { background: var(--primary-hover); transform: translateY(-1px); box-shadow: 0 4px 18px var(--primary-glow); } .btn-primario:active { transform: translateY(0); } /* Secundário com texto na cor normal: em cinza sobre cinza ele parecia desabilitado nos dois temas. Cancelar não fica vermelho ao passar o mouse: vermelho é de apagar, e cancelar não apaga nada. */ .btn-secundario { background: var(--surface-alt); color: var(--text); border: 1px solid var(--border); } .btn-secundario:hover { background: var(--surface-hover); color: var(--text); border-color: var(--border-strong); } [data-theme="light"] .btn-secundario { background: var(--surface-raised); border-color: var(--border-strong); } [data-theme="light"] .btn-secundario:hover { background: var(--surface-hover); } .btn-cancelar { background: transparent; color: var(--text-muted); border: 1px solid var(--border); } .btn-cancelar:hover { background: var(--surface-hover); color: var(--text); border-color: var(--border-strong); } .btn-excluir { background: transparent; color: var(--danger); font-size: 0.893rem; padding: 4px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-weight: 600; } .btn-excluir:hover { background: var(--danger-light); border-color: var(--danger); } .btn-editar { background: transparent; color: var(--success); font-size: 0.893rem; padding: 4px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-weight: 600; } .btn-editar:hover { background: var(--success-light); border-color: var(--success); } .btn-inativar { background: transparent; color: var(--warning); font-size: 0.893rem; padding: 4px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-weight: 600; } .btn-inativar:hover { background: var(--warning-light); border-color: var(--warning); } .btn-clonar { background: transparent; color: var(--info); font-size: 0.893rem; padding: 4px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-weight: 600; } .btn-clonar:hover { background: var(--info-light); border-color: var(--info); } .btn-reset { background: var(--danger-solido); color: #fff; padding: 10px 20px; font-weight: 700; } .btn-reset:hover { opacity: 0.9; } /* ══ EXPORTAÇÃO ══════════════════════════════ */ .barra-exportacao { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 10px 16px; background: var(--surface); border: 1px solid var(--border-light); border-radius: var(--radius); margin-bottom: 16px; } .exportacao-titulo { font-weight: 700; font-size: 0.86rem; color: var(--text-light); text-transform: uppercase; letter-spacing: 0.1em; margin-right: 4px; } /* Um grupo por documento (28/09/2026). A separação é o espaço e o nome de cada grupo: com um fio à esquerda, o grupo que descia de linha (Histórico a 1280 px) começava com um traço solto e recuado (revisão de 28/09/2026). */ .barra-exportacao:has(.exportacao-grupo) { column-gap: 26px; row-gap: 10px; } .exportacao-grupo { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; } @media (max-width: 768px) { .exportacao-grupo { width: 100%; } .exportacao-grupo .exportacao-titulo { flex-basis: 100%; } .exportacao-grupo + .exportacao-grupo { border-left: 0; padding-left: 0; margin-left: 0; border-top: 1px solid var(--border); padding-top: 8px; } } .btn-export { padding: 5px 12px; border-radius: var(--radius); font-size: 0.893rem; font-weight: 700; border: 1px solid var(--border); background: var(--surface-alt); color: var(--text-muted); transition: all 0.15s; letter-spacing: 0.02em; } .btn-export:hover { background: var(--surface-hover); color: var(--text); border-color: var(--border-strong); } .btn-xlsx { color: var(--success) !important; } .btn-xlsx:hover { background: var(--success-light) !important; border-color: var(--success) !important; } .btn-pdf { color: var(--primary-texto) !important; } .btn-pdf:hover { background: var(--primary-light) !important; border-color: var(--primary) !important; } .btn-wpp { color: var(--success) !important; } .btn-wpp:hover { background: var(--success-light) !important; border-color: var(--success) !important; } .btn-email { color: var(--info) !important; } /* "Imprimir" era o unico da fileira sem classe de cor no CSS. (21/09/2026) */ .btn-print { color: var(--text-muted) !important; } .btn-print:hover { background: var(--surface-hover) !important; border-color: var(--border-strong) !important; color: var(--text) !important; } .btn-email:hover { background: var(--info-light) !important; border-color: var(--info) !important; } /* O verde estava escrito na mao e era o mesmo nos dois temas: 3,17 de contraste no escuro. --success ja tem tom por tema. (21/09/2026) */ .btn-csv { color: var(--success) !important; } .btn-csv:hover { background: var(--success-light) !important; border-color: var(--success) !important; } /* ══ TABELAS ═════════════════════════════════ */ /* `position: relative` não é enfeite. Sem ele, o `.sr-only` do cabeçalho ("Abrir", "Ações"), que é `position: absolute`, tinha como referência a janela e não este contêiner, e a rolagem daqui não o recortava. No celular ele ficava lá na direita, a 596 px, e o navegador reduzia o zoom da página inteira para caber: tudo miúdo, a partir do Dashboard. */ .tabela-container { position: relative; overflow-x: auto; border: 1px solid var(--border-light); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); background: var(--surface); } table { width: 100%; border-collapse: collapse; font-size: 0.855rem; } thead tr { background: var(--thead-bg); } th { padding: 13px 16px; text-align: left; font-weight: 700; font-size: 0.86rem; text-transform: uppercase; letter-spacing: 0.1em; white-space: nowrap; color: var(--thead-color); } td { padding: 11px 16px; text-align: left; border-bottom: 1px solid var(--border-light); color: var(--text); vertical-align: middle; } tbody tr:last-child td { border-bottom: none; } tbody tr:hover { background: var(--row-hover); } tbody tr:nth-child(even) { background: var(--row-alt); } tbody tr:nth-child(even):hover { background: var(--row-hover); } .td-vazio { text-align: center; color: var(--text-muted); padding: 40px; font-style: italic; font-size: 0.875rem; } /* ══ PAINEL DETALHES ═════════════════════════ */ .painel-detalhes { margin-top: 20px; background: var(--surface); border: 1px solid var(--border-light); border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--shadow); } .detalhe-info { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; margin-bottom: 16px; } .detalhe-info div { padding: 6px 0; } .detalhe-info span { font-size: 0.86rem; color: var(--text-light); text-transform: uppercase; letter-spacing: 0.1em; display: block; font-weight: 700; margin-bottom: 3px; } .detalhe-info strong { font-size: 0.9rem; color: var(--text); font-weight: 600; } .detalhe-tabela { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 0.855rem; border: 1px solid var(--border-light); border-radius: var(--radius); overflow: hidden; } .detalhe-tabela th { background: var(--surface-alt); color: var(--text-muted); padding: 9px 14px; text-align: left; font-size: 0.86rem; text-transform: uppercase; letter-spacing: 0.09em; font-weight: 700; } .detalhe-tabela td { padding: 10px 14px; border-bottom: 1px solid var(--border-light); } .detalhe-obs { background: var(--surface-alt); border: 1px solid var(--border-light); border-radius: var(--radius); padding: 12px 16px; margin-top: 12px; font-size: 0.875rem; color: var(--text-muted); white-space: pre-wrap; } .detalhe-obs > strong:first-child { display: block; font-size: 0.86rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-light); margin-bottom: 5px; font-weight: 700; } /* ══ LISTAS ══════════════════════════════════ */ .filtro-lista { margin-bottom: 12px; font-size: 0.855rem; color: var(--text-muted); } .filtro-lista label { display: flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; } ul { list-style: none; } ul li { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--border-light); font-size: 0.875rem; gap: 10px; flex-wrap: wrap; transition: background 0.12s; } ul li:first-child { border-top: 1px solid var(--border-light); } ul li:hover { background: var(--row-hover); } ul li.inativo { opacity: 0.45; } .acoes-lista { display: flex; gap: 5px; flex-shrink: 0; flex-wrap: wrap; } .tag-inativo { font-size: 0.86rem; background: var(--warning-light); color: var(--warning); padding: 2px 7px; border-radius: 10px; font-style: normal; font-weight: 700; margin-left: 8px; text-transform: uppercase; letter-spacing: 0.06em; } .tag-perda { font-size: 0.86rem; background: var(--info-light); color: var(--info); padding: 2px 7px; border-radius: 10px; font-style: normal; font-weight: 700; margin-left: 8px; text-transform: uppercase; letter-spacing: 0.06em; } .vazio { color: var(--text-light); font-style: italic; font-size: 0.875rem; justify-content: flex-start !important; padding: 20px 16px !important; border: none !important; } /* Botão de ação dentro do toast, o "Desfazer" (18/09/2026). */ .toast-acao { margin-left: 10px; padding: 3px 10px; border-radius: var(--radius-sm); border: 1px solid currentColor; background: transparent; color: inherit; font-weight: 600; cursor: pointer; font-size: 0.893rem; } .toast-acao:hover { background: rgba(255,255,255,0.12); } /* Variação contra o período anterior, dentro do card (18/09/2026). */ .kpi-variacao { font-size: 0.86rem; margin-top: 4px; color: var(--text-muted); font-family: 'JetBrains Mono', monospace; } .kpi-variacao-boa { color: var(--success); } .kpi-variacao-ruim { color: var(--danger); } /* Número que leva à lista que o formou (17/09/2026). */ .kpi-clicavel { cursor: pointer; } /* A borda do hover seguia sempre a cor da marca, entao um cartao verde piscava vermelho ao passar o mouse. Agora cada variante usa a propria cor, a mesma do tracinho da esquerda e do icone. (21/09/2026) */ /* Contorno uniforme no hover (24/09/2026, pedido do dono): era a borda de 1 px pintada, e a faixa de 4 px da esquerda ficava mais grossa que o resto do contorno. Agora são a borda mais 2 px de sombra interna, 3 px em volta (com 4 px o dono achou largo demais), e a faixa some no hover para o lado esquerdo não ficar mais grosso. Sombra, e não borda mais grossa: nada se mexe no layout. */ .kpi-clicavel { --cor-kpi: var(--primary); } .kpi-clicavel.verde { --cor-kpi: var(--success); } .kpi-clicavel.laranja { --cor-kpi: var(--warning); } .kpi-clicavel.roxo { --cor-kpi: var(--info); } .kpi-clicavel.violeta { --cor-kpi: var(--violeta); } .kpi-clicavel::before { transition: opacity var(--duration-fast) var(--ease-standard); } .kpi-clicavel:hover { border-color: var(--cor-kpi); box-shadow: var(--shadow), inset 0 0 0 2px var(--cor-kpi); transform: translateY(-1px); transition: transform var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .kpi-clicavel:hover::before { opacity: 0; } tr.linha-clicavel { cursor: pointer; } /* Linha escolhida pelas setas do teclado (18/09/2026). */ tr.linha-teclado-ativa td { background: var(--surface-hover); box-shadow: inset 3px 0 0 var(--primary); } tr.linha-clicavel:hover td { background: var(--surface-hover); } /* ══ LANÇAMENTOS ════════════════════════════ */ .linha-combustivel { /* As colunas são declaradas junto da célula de descarga, mais abaixo: com o campo oculto a linha tem uma coluna a menos. É lá também que elas viram uma coluna só, abaixo de 640 px. Havia regras para 768 e 480 px no bloco responsivo, mas nunca valeram: vinham antes no arquivo e perdiam sempre para esta (saíram em 23/09/2026). */ display: grid; gap: 8px; align-items: center; margin-bottom: 8px; padding: 12px 14px; background: var(--surface-alt); border-radius: var(--radius); border: 1px solid var(--border-light); transition: border-color 0.15s; } .linha-combustivel:hover { border-color: var(--border-strong); } .badge-perda { font-size: 0.86rem; padding: 3px 10px; border-radius: 12px; font-weight: 700; white-space: nowrap; font-family: 'JetBrains Mono', monospace; } .badge-perda.ok { background: var(--success-light); color: var(--success); } .badge-perda.alerta { background: var(--warning-light); color: var(--warning); } .badge-perda.excesso { background: var(--danger-light); color: var(--danger); } .acoes-lancamento { display: flex; gap: 10px; margin-top: 24px; flex-wrap: wrap; padding-top: 20px; border-top: 1px solid var(--border-light); } .banner-edicao { background: var(--info-light); border: 1px solid var(--border-light); border-left: 4px solid var(--info); border-radius: var(--radius); padding: 10px 16px; margin-bottom: 16px; font-size: 0.875rem; color: var(--info); display: none; } /* ══ DICA ════════════════════════════════════ */ .dica { font-size: 0.93rem; color: var(--text-muted); margin-bottom: 14px; line-height: 1.6; } /* ══ FILTROS ═════════════════════════════════ */ .filtros { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; margin-bottom: 14px; padding: 18px; background: var(--surface); border: 1px solid var(--border-light); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); } /* O botão que recolhe os filtros do Histórico só existe no celular. */ .filtros-alternar { display: none; } @media (max-width: 768px) { /* Com a classe do botão junto: a regra de tela de toque centraliza todo `.btn-secundario`, vem depois no arquivo e empatava com esta. */ .btn-secundario.filtros-alternar { display: flex; width: 100%; justify-content: space-between; align-items: center; margin-bottom: var(--space-3); } .filtros-alternar svg { width: 16px; height: 16px; transition: transform 0.15s; } .filtros-alternar[aria-expanded="true"] svg { transform: rotate(180deg); } .filtros-alternar-qtd { color: var(--primary-texto); font-weight: 700; } #relatorios .filtros:not(.filtros-abertos) { display: none; } } .filtros-acoes { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; align-items: center; } .resumo { background: var(--surface); border: 1px solid var(--border-light); border-left: 4px solid var(--primary); border-radius: var(--radius); padding: 11px 16px; margin-bottom: 14px; font-size: 0.875rem; color: var(--text-muted); display: none; } .filtros-rapidos-sep { font-size: 0.86rem; font-weight: 700; color: var(--text-light); text-transform: uppercase; letter-spacing: 0.08em; align-self: center; white-space: nowrap; } .filtros-rapidos-linha { display: flex; align-items: center; gap: 7px; margin-bottom: 18px; flex-wrap: wrap; } .btn-filtro-rapido { padding: 5px 12px; border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); border-radius: 20px; font-size: 0.893rem; font-weight: 600; cursor: pointer; transition: all 0.15s; font-family: inherit; } .btn-filtro-rapido:hover { background: var(--primary-light); border-color: var(--primary); color: var(--primary-mid); } /* ══ ABAS ════════════════════════════════════ */ .analitico-abas { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 20px; border-bottom: 1px solid var(--border-light); } .aba-btn { background: transparent; color: var(--text-light); padding: 9px 16px; border-radius: 0; font-size: 0.893rem; font-weight: 600; border: none; border-bottom: 2px solid transparent; position: relative; bottom: -1px; transition: color 0.15s, border-color 0.15s; } .aba-btn:hover { color: var(--text); border-bottom-color: var(--border-strong); } .aba-btn.ativa { color: var(--primary-texto); font-weight: 700; border-bottom-color: var(--primary); } .aba-btn svg { width: 16px; height: 16px; margin-right: 6px; vertical-align: middle; } /* ══ GRÁFICOS ════════════════════════════════ */ .grafico-wrapper { background: var(--surface); border: 1px solid var(--border-light); border-radius: var(--radius-lg); padding: 20px; overflow-x: auto; min-height: 200px; display: flex; align-items: center; justify-content: center; } .grafico-wrapper canvas { max-width: 100%; display: block; } .grafico-vazio { color: var(--text-light); font-style: italic; font-size: 0.9rem; text-align: center; padding: 40px 0; } /* Estado vazio de uma tela inteira (mês sem nota etc.): um cartão, não uma frase solta. */ .estado-vazio-cartao { display: flex; flex-direction: column; gap: 4px; padding: var(--space-5) var(--space-6); background: var(--surface); border: 1px dashed var(--border); border-radius: var(--radius-lg); color: var(--text-muted); font-size: 0.88rem; margin-bottom: var(--space-4); } .estado-vazio-cartao strong { color: var(--text); font-size: 0.95rem; } /* ══ MODAL ═══════════════════════════════════ */ /* Modal mais alto que a tela: o fundo rola e a margem automática centraliza só quando cabe. Com `align-items: center` sozinho, o topo do modal (título incluído) ficava fora da tela, sem como chegar nele (18/09/2026). No modo demo a camada começa abaixo da faixa vermelha, que cobria o título. */ .modal-overlay { position: fixed; top: var(--faixa-demo-h); left: 0; width: 100%; height: calc(100% - var(--faixa-demo-h)); background: rgba(0,0,0,0.85); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 20px; overflow-y: auto; } .modal { background: var(--surface-raised); border-radius: var(--radius-xl); padding: 28px 30px; width: 100%; max-width: 400px; box-shadow: var(--shadow-lg); border: 1px solid var(--border); animation: modalIn 0.22s cubic-bezier(0.34,1.56,0.64,1); margin: auto; } /* No tema claro o fundo do modal escurece menos: preto a 85 % pesava como se a tela tivesse apagado. */ [data-theme="light"] .modal-overlay { background: rgba(33,37,41,0.5); } @keyframes modalIn { from { opacity: 0; transform: scale(0.93) translateY(12px); } to { opacity: 1; transform: scale(1) translateY(0); } } .modal h3 { color: var(--text); margin-bottom: 20px; font-family: 'Syne', sans-serif; font-size: 1.05rem; font-weight: 700; text-transform: none; letter-spacing: 0; } .modal-acoes { display: flex; gap: 8px; margin-top: 20px; justify-content: flex-end; flex-wrap: wrap; } /* Botão com nome de empresa no rótulo pode passar da largura do modal: quebra a linha em vez de vazar pela borda. */ .modal-acoes button { max-width: 100%; white-space: normal; } /* ══ BADGES ══════════════════════════════════ */ .badge-var { display: inline-flex; align-items: center; gap: 3px; padding: 3px 8px; border-radius: 10px; font-size: 0.86rem; font-weight: 700; font-family: 'JetBrains Mono', monospace; } .badge-var.alta { background: var(--danger-light); color: var(--danger); } .badge-var.baixa { background: var(--success-light); color: var(--success); } .badge-var.igual { background: var(--surface-alt); color: var(--text-light); } .alerta-comparativo { background: var(--warning-light); border: 1px solid var(--warning); border-radius: var(--radius); padding: 11px 16px; margin-top: 12px; font-size: 0.875rem; color: var(--warning); } .barra-progresso { height: 3px; background: var(--border-light); border-radius: 3px; overflow: hidden; margin-top: 6px; } .barra-progresso-fill { height: 100%; background: var(--primary); border-radius: 3px; transition: width 0.6s ease; } /* ══ ANALÍTICO FILTROS ═══════════════════════ */ .input-tabela { width: 110px !important; padding: 6px 8px !important; font-size: 0.893rem !important; border-radius: var(--radius-sm) !important; text-align: right; font-family: 'JetBrains Mono', monospace !important; } /* ══ FRETES ══════════════════════════════════ */ .frete-taxas-grid { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; } .frete-taxa-item { display: flex; flex-direction: column; gap: 6px; background: var(--surface-alt); border: 1px solid var(--border-light); border-radius: var(--radius-md); padding: 12px 16px; min-width: 180px; } .frete-taxa-item label { font-weight: 700; font-size: 0.86rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); } .linha-detalhe-frete td { background: var(--surface-alt) !important; font-size: 0.893rem; } /* ══ TOAST ═══════════════════════════════════ */ .toast { position: relative; display: flex; align-items: center; gap: 11px; padding: 13px 20px; border-radius: var(--radius-md); font-size: 0.875rem; font-weight: 500; line-height: 1.4; box-shadow: var(--shadow-md); z-index: 9999; opacity: 0; transform: translateY(16px) scale(0.96); transition: opacity 0.25s ease, transform 0.25s ease; max-width: 380px; pointer-events: none; } .toast-visivel { opacity: 1; transform: translateY(0) scale(1); } .toast-icone { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.893rem; font-weight: 700; flex-shrink: 0; } /* Texto na cor normal; o tipo fica na borda, na faixa da esquerda e no ícone. A frase inteira em azul ou laranja lia mal, principalmente no tema escuro (18/09/2026). */ .toast-sucesso { background: var(--surface-raised); color: var(--text); border: 1px solid var(--success); border-left-width: 4px; } .toast-sucesso .toast-icone { background: var(--success); color: #fff; } .toast-erro { background: var(--surface-raised); color: var(--text); border: 1px solid var(--danger); border-left-width: 4px; } .toast-erro .toast-icone { background: var(--danger-solido); color: #fff; } .toast-aviso { background: var(--surface-raised); color: var(--text); border: 1px solid var(--warning); border-left-width: 4px; } .toast-aviso .toast-icone { background: var(--warning); color: #fff; } .toast-info { background: var(--surface-raised); color: var(--text); border: 1px solid var(--info); border-left-width: 4px; } .toast-info .toast-icone { background: var(--info-solido); color: #fff; } /* ══ TOTALIZADOR ════════════════════════════ */ .totalizador-nota { display: flex; align-items: center; gap: 20px; padding: 14px 20px; background: var(--surface-alt); border: 1px solid var(--border-light); border-left: 4px solid var(--primary); border-radius: var(--radius); margin-top: 12px; flex-wrap: wrap; } .total-item { display: flex; flex-direction: column; gap: 2px; } .total-label { font-size: 0.86rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-light); } .total-valor { font-size: 1.1rem; font-weight: 700; color: var(--text); font-family: 'JetBrains Mono', monospace; letter-spacing: -0.02em; } /* Destaque pelo tamanho, não pelo vermelho, que no sistema quer dizer alerta (vistoria de 28/09/2026, como o frete do mês em Fretes). */ .total-destaque { color: var(--text); font-size: 1.2rem; } .total-sep { color: var(--border-strong); font-size: 1.4rem; align-self: center; } /* ══ PAGINAÇÃO ═══════════════════════════════ */ .paginacao { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding: 12px 16px; background: var(--surface); border: 1px solid var(--border-light); border-top: none; border-radius: 0 0 var(--radius-lg) var(--radius-lg); font-size: 0.893rem; } /* Sem páginas, sem barra: vazia ela aparecia como uma tira solta sob a tabela. */ .paginacao:empty { display: none; } .pag-info { color: var(--text-muted); } .pag-controles { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; } .pag-btn { padding: 5px 10px; min-width: 32px; border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); border-radius: var(--radius-sm); font-size: 0.893rem; font-weight: 600; cursor: pointer; transition: all 0.12s; font-family: inherit; } .pag-btn:hover:not(:disabled) { background: var(--surface-alt); border-color: var(--border-strong); color: var(--text); } .pag-btn.ativo { background: var(--primary); color: #fff; border-color: var(--primary); } .pag-btn:disabled { opacity: 0.3; cursor: not-allowed; } .pag-ellipsis { padding: 4px; color: var(--text-light); font-size: 0.893rem; user-select: none; } /* ══ XML / IMPORTAÇÃO ═══════════════════════ */ .importar-xml-bloco { background: var(--surface-alt); border: 1px solid var(--border-light); border-left: 4px solid var(--primary); border-radius: var(--radius-md); padding: 16px 20px; margin-bottom: 24px; } .importar-xml-label { display: block; font-size: 0.893rem; font-weight: 700; color: var(--text); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 5px; } .tag-opcional { font-size: 0.86rem; background: var(--surface); color: var(--text-light); border: 1px solid var(--border); padding: 2px 7px; border-radius: 10px; font-style: normal; font-weight: 600; margin-left: 7px; text-transform: uppercase; vertical-align: middle; } .banner-xml { background: var(--success-light); border: 1px solid var(--success); border-left: 4px solid var(--success); border-radius: var(--radius); padding: 12px 16px; margin-bottom: 16px; font-size: 0.875rem; color: var(--success); line-height: 1.7; display: none; } .banner-xml small { display: block; margin-top: 5px; color: var(--warning); font-size: 0.893rem; } /* ══ IMPORTAÇÃO PLANILHA ════════════════════ */ .tabela-preview { width: 100%; border-collapse: collapse; font-size: 0.893rem; } .tabela-preview th { background: var(--surface-alt); padding: 8px 12px; text-align: left; font-size: 0.86rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-light); border-bottom: 2px solid var(--border); white-space: nowrap; } .tabela-preview td { padding: 7px 12px; border-bottom: 1px solid var(--border-light); max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tabela-preview tr:hover td { background: var(--row-hover); } /* Mínimo de 360 px por coluna, mas nunca mais que a largura que existe: no celular de 320 ou 360 a grade passava da tela. Sem espaço para rótulo e seletor lado a lado, o seletor desce (23/09/2026). */ .mapeamento-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)); gap: 10px; margin-top: 10px; } .mapeamento-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 10px 14px; background: var(--surface-alt); border: 1px solid var(--border-light); border-radius: var(--radius); } .mapeamento-label { flex: 1; font-size: 0.855rem; min-width: 160px; } .mapeamento-label.obrigatorio { font-weight: 700; } .mapeamento-label.obrigatorio::after { content: " *"; color: var(--danger); } .mapeamento-select { flex: 1; min-width: 160px; } .importacao-aviso { background: var(--warning-light); border: 1px solid var(--warning); border-radius: var(--radius); padding: 12px 16px; font-size: 0.875rem; color: var(--warning); margin-top: 12px; line-height: 1.8; } .importacao-aviso.aviso-novos { background: var(--info-light); border-color: var(--info); color: var(--info); } .resumo-cards { display: flex; gap: 14px; flex-wrap: wrap; margin: 16px 0; } .resumo-card { flex: 1; min-width: 120px; padding: 16px 20px; border-radius: var(--radius-md); text-align: center; } .resumo-card.verde { background: var(--success-light); color: var(--success); } .resumo-card.laranja { background: var(--warning-light); color: var(--warning); } .resumo-card.cinza { background: var(--surface-alt); color: var(--text-muted); } .resumo-card.vermelho{ background: var(--danger-light); color: var(--danger); } .resumo-valor { font-family: 'Syne', sans-serif; font-size: 2rem; font-weight: 700; line-height: 1; } .resumo-label { font-size: 0.86rem; margin-top: 5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; } .detalhes-resumo { background: var(--surface); border: 1px solid var(--border-light); border-radius: var(--radius); padding: 10px 14px; font-size: 0.855rem; cursor: pointer; margin-top: 10px; } .detalhes-resumo.erro summary { color: var(--danger); } .detalhes-resumo summary { font-weight: 700; user-select: none; } .importacao-sucesso { text-align: center; padding: 48px 24px; } .sucesso-icone { font-size: 3.5rem; margin-bottom: 16px; } .importacao-sucesso h3 { font-family: 'Syne', sans-serif; font-size: 1.4rem; margin-bottom: 10px; } .importacao-sucesso p { color: var(--text-muted); margin-bottom: 5px; } /* ══ LOG LIST ════════════════════════════════ */ .log-list { margin-top: 6px; font-size: 0.893rem; color: var(--text-light); list-style: none; font-family: 'JetBrains Mono', monospace; } .log-list li { padding: 3px 0; border: none; font-size: 0.893rem; justify-content: flex-start; } .log-list li::before { content: '·'; margin-right: 7px; color: var(--primary); } .preview-nf { max-width: 100%; margin-top: 8px; border-radius: var(--radius); border: 1px solid var(--border); } /* ══════════════════════════════════════════════ INPUT DATE / MONTH: o ícone do calendário Aqui havia DUAS correções para o mesmo problema, escritas em momentos diferentes, e a segunda desfazia a primeira. O `filter: invert(1)` nasceu quando o ícone vinha preto por padrão e não havia mais nada cuidando dos controles nativos. Em 21/09/2026 entrou `color-scheme` por tema (no topo deste arquivo), que manda o NAVEGADOR desenhar caixa de marcar, barra de rolagem e calendário no tom certo: no escuro o ícone já nasce branco. A partir dali o `invert` passou a fazer o contrário do que prometia, devolvendo o ícone branco para preto, e no fundo escuro ele sumia. O dono achou no seletor de mês da central. Sobra a opacidade, que é a única coisa que ainda é decisão nossa: o ícone fica discreto em repouso e firme no hover. Não há mais bloco separado por tema, porque o `color-scheme` já resolve os dois. (22/09/2026) */ input[type="date"]::-webkit-calendar-picker-indicator, input[type="month"]::-webkit-calendar-picker-indicator { opacity: 0.75; cursor: pointer; transition: opacity 0.15s; } input[type="date"]::-webkit-calendar-picker-indicator:hover, input[type="month"]::-webkit-calendar-picker-indicator:hover { opacity: 1; } /* ══ IMPRESSÃO ═══════════════════════════════ */ @media print { .sidebar, .app-header, .filtros, .filtros-acoes, .barra-exportacao, .acoes-lancamento, .acoes-lista, .btn-excluir, .btn-editar, .btn-secundario, .btn-clonar, .painel-detalhes, .no-print { display: none !important; } .main-area { margin-left: 0 !important; } /* Os botões "Imprimir" de Fretes e de Relatórios imprimem o PDF do padrão desde 25/09/2026; a folha montada à parte (#areaImpressao) saiu. Isto aqui é só o Ctrl+P da tela aberta. */ body { background: white; color: black; font-size: 11px; font-family: Arial, sans-serif; } table { border-collapse: collapse; width: 100%; font-size: 10px; } th, td { border: 1px solid #aaa; padding: 5px 8px; } thead tr { background: #1e2227 !important; color: white !important; } tr { page-break-inside: avoid; } } /* ══ RESPONSIVO ══════════════════════════════ */ @media (max-width: 1024px) { :root { --sidebar-width: 220px; } .content-area { padding: 20px 20px 48px; } } /* A barra lateral vira gaveta abaixo de 1024 px, e não só no celular (23/09/2026). Entre 769 e 1023 ela ficava fixa com 220 px: num tablet em pé (820) sobravam 565 px para o conteúdo, e a legenda da Distribuição caía para 8 px de largura. No celular deitado (844x390) a barra ocupava um quarto da tela, a tela inteira de altura. Notebook de 1366 com zoom de 125% continua com a barra fixa: a janela dele tem 1093. O limite em JS que fecha a gaveta ao tocar num item (ui.js) usa o mesmo número. */ /* Fechada, a gaveta também fica `visibility: hidden`: só com o `transform` ela saía da vista mas não do Tab, e quem navega pelo teclado numa janela de 960 px passava por quinze itens invisíveis antes de chegar à tela. O `visibility` espera a animação de saída terminar (atraso de 0,3 s) e volta na hora ao abrir. */ @media (max-width: 1023px) { :root { --sidebar-width: 260px; } .sidebar { transform: translateX(-100%); visibility: hidden; transition: transform 0.3s cubic-bezier(0.4,0,0.2,1), visibility 0s linear 0.3s; } .sidebar.aberta { transform: translateX(0); visibility: visible; box-shadow: var(--shadow-lg); transition: transform 0.3s cubic-bezier(0.4,0,0.2,1), visibility 0s; } .main-area { margin-left: 0; } .btn-hamburger { display: flex; } } /* O fundo escuro da gaveta não existe com a barra fixa. Sem isto, um tablet girado de em pé para deitado com o menu aberto ficava com o fundo escuro por cima de tudo até mais um toque. */ @media (min-width: 1024px) { .sidebar-overlay.visivel { display: none; } } @media (max-width: 768px) { .content-area { padding: 16px 14px 48px; } .kpi-container { grid-template-columns: repeat(2, 1fr); gap: 10px; } .kpi-valor { font-size: 1.4rem; } .form-grid { grid-template-columns: 1fr; } .filtros { grid-template-columns: 1fr; padding: 14px; } th { padding: 10px 12px; font-size: 0.86rem; } td { padding: 9px 12px; } .aba-btn { font-size: 0.893rem; padding: 8px 11px; } .info-sistema { grid-template-columns: repeat(2, 1fr); } .header-datetime { display: none; } .header-page-title { font-size: 1rem; } } @media (max-width: 480px) { .kpi-container { grid-template-columns: 1fr; } .resumo-cards { flex-direction: column; } .mapeamento-grid { grid-template-columns: 1fr; } td, th { padding: 6px 8px; font-size: 0.86rem; } .btn-export { padding: 4px 8px; font-size: 0.86rem; } /* Alvo de toque no celular. Estes três caíam para 21–22 px de altura, abaixo do mínimo de 24 px, e são botões largos com espaço de sobra. Os ícones das tabelas ficam em 28 px e já passam: a densidade delas, escolhida em 18/09, não muda. (21/09/2026) */ .btn-export, .segmentado button, .btn-metrica, .demo-dica button { min-height: 32px; } /* Os dois links de saida criados em 22/09 caiam em 22 px de altura, o mesmo problema dos tres acima: "Ver no Analitico" no Dashboard e "Ver em Fretes" no cartao da central. */ .dash-ver-completo, .central-card-abrir { min-height: 32px; } } /* ══════════════════════════════════════════════ DASHBOARD: POR COMBUSTÍVEL (único bloco) ══════════════════════════════════════════════ */ .dash-combs-wrapper { background: var(--surface); border: 1px solid var(--border-light); border-radius: var(--radius-lg); padding: 20px; margin-top: 8px; } .dash-comb-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; margin-bottom: 4px; } .dash-comb-kpi { background: var(--surface-alt); border: 1px solid var(--border-light); border-radius: var(--radius-md); padding: 14px 16px; border-left: 3px solid var(--border-strong); transition: transform 0.15s; } .dash-comb-kpi:hover { transform: translateY(-2px); } /* As mesmas cores dos cartões do topo: o de notas é o vermelho da marca, e era o único sem cor, com a borda cinza (vistoria de 28/09/2026). */ .dash-comb-kpi.vermelho { border-left-color: var(--primary); } .dash-comb-kpi.verde { border-left-color: var(--success); } .dash-comb-kpi.laranja { border-left-color: var(--warning); } .dash-comb-kpi.roxo { border-left-color: var(--info); } .dash-comb-kpi-val { font-family: 'JetBrains Mono', monospace; font-size: 1.25rem; font-weight: 600; color: var(--text); letter-spacing: -0.02em; line-height: 1.2; } .dash-comb-kpi-label { font-size: 0.86rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-light); margin-top: 4px; display: flex; flex-direction: column; gap: 3px; } .dash-variacao-alta { color: var(--danger); font-size: 0.86rem; font-weight: 600; } .dash-variacao-baixa { color: var(--success); font-size: 0.86rem; font-weight: 600; } .dash-variacao-ok { color: var(--text-muted); font-size: 0.86rem; } /* ── Comparativo mês a mês ── */ #dashComparativoContainer .tabela-container { margin-top: 8px; } .linha-mes-atual td { background: var(--surface-raised) !important; font-weight: 600; } /* ========== SPINNER EM BOTÕES ========== */ .btn-spinner { pointer-events: none; opacity: 0.7; position: relative; padding-left: 2.2rem; } .btn-spinner::before { content: ''; position: absolute; left: 0.7rem; top: calc(50% - 8px); width: 16px; height: 16px; border: 2px solid transparent; border-top-color: currentColor; border-radius: 50%; animation: spin 0.6s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* ========== FOCO VISÍVEL ========== */ /* Campo de texto longo, link e o que recebe foco por `tabindex` (a prévia do PDF no celular, por exemplo) também ganham o contorno. */ button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible, [tabindex]:not([tabindex="-1"]):focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; } /* ========== TOGGLE SWITCH ========== */ ._cfg-toggle { position: relative; display: inline-block; width: 42px; height: 24px; flex-shrink: 0; } ._cfg-toggle input { opacity: 0; width: 0; height: 0; } ._cfg-slider { position: absolute; inset: 0; background: var(--border); border-radius: 24px; cursor: pointer; transition: background 0.2s; } ._cfg-slider:before { content: ''; position: absolute; width: 18px; height: 18px; left: 3px; top: 3px; background: #fff; /* A bolinha branca sobre a trilha --border do tema claro (#dee2e6) dava 1,2 de contraste e praticamente sumia com o alerta desligado. A sombra a destaca nos dois temas sem mudar o tamanho. (21/09/2026) */ box-shadow: 0 1px 3px rgba(0,0,0,0.35), 0 0 0 1px rgba(0,0,0,0.12); border-radius: 50%; transition: transform 0.2s; } ._cfg-toggle input:checked + ._cfg-slider { background: var(--primary); } ._cfg-toggle input:checked + ._cfg-slider:before { transform: translateX(18px); } /* ========== BLOCO DE CONFIG ========== */ ._cfg-bloco { padding: 16px; border-radius: 10px; border: 1px solid var(--border-light); background: var(--surface-alt); } /* ========== SELETOR DE EMPRESA NO HEADER ========== */ .header-select { background: var(--header-bg); border: 1px solid var(--border); color: var(--text); border-radius: var(--radius); padding: 6px 10px; font-size: 0.93rem; cursor: pointer; outline: none; } .header-select:hover { border-color: var(--border-strong); } .header-select:focus { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-glow); } /* ── SIDEBAR MODO CLARO ── */ [data-theme="light"] .sidebar { background: #ffffff; border-right: 1px solid #e2e8f0; box-shadow: 2px 0 12px rgba(0,0,0,0.04); } /* Sem fundo proprio (22/09/2026). O tema claro pintava a area da logo de #f8fafc contra o #ffffff da barra: 4,6% mais escura, numa superficie de 259 por 64 px colada nela. Sutil para medir, visivel para o olho, e o dono reparou. O tema escuro nunca fez isso, deixa a area transparente e ela herda o fundo da barra, entao a diferenca era so entre os temas. E desde que a area passou a ter a mesma altura do cabecalho, a linha de baixo ja a delimita: o fundo era uma segunda marcacao para a mesma coisa. */ [data-theme="light"] .sidebar-logo { border-bottom: 1px solid #e2e8f0; } [data-theme="light"] .sidebar-logo-title { color: #0f172a; } [data-theme="light"] .sidebar-logo-sub { color: #94a3b8; } /* Ícone da logo usa --primary-subtle para seguir a cor primária */ [data-theme="light"] .sidebar-logo-icon { background: var(--primary-subtle); } [data-theme="light"] .sidebar-logo-icon svg { stroke: var(--primary); } [data-theme="light"] .sidebar-item { color: #334155; } [data-theme="light"] .sidebar-item:hover { background: #f1f5f9; color: #0f172a; } [data-theme="light"] .sidebar-item:hover .sidebar-item-icon svg { stroke: var(--primary); } /* Item ativo usa --primary-subtle2 para seguir a cor primária */ [data-theme="light"] .sidebar-item.ativo { background: var(--primary-subtle2); color: var(--primary); border-left-color: var(--primary); } [data-theme="light"] .sidebar-item.ativo .sidebar-item-icon svg { stroke: var(--primary); } [data-theme="light"] .sidebar-item .sidebar-item-icon { color: #94a3b8; } [data-theme="light"] .sidebar-item.ativo .sidebar-item-icon { color: var(--primary); } /* ── ALERTAS MODO ESCURO ── */ [data-theme="dark"] .alerta-card { background: rgba(30,37,53,0.95) !important; color: var(--text); } [data-theme="dark"] .alerta-card strong { color: var(--text); } [data-theme="dark"] .alerta-card .alerta-msg { color: var(--text-muted); } [data-theme="dark"] .alerta-card--laranja { background: rgba(245,158,11,0.07) !important; border-left-color: var(--warning) !important; } [data-theme="dark"] .alerta-card--laranja .alerta-titulo { color: var(--warning) !important; } [data-theme="dark"] .alerta-card--azul { background: rgba(59,130,246,0.07) !important; border-left-color: var(--info) !important; } [data-theme="dark"] .alerta-card--azul .alerta-titulo { color: var(--info) !important; } [data-theme="dark"] .alerta-card--vermelho { background: rgba(239,68,68,0.07) !important; border-left-color: var(--danger) !important; } [data-theme="dark"] .alerta-card--vermelho .alerta-titulo { color: var(--danger) !important; } [data-theme="dark"] .alerta-ignorar { border-color: #475569; color: var(--text-muted); background: transparent; } [data-theme="dark"] .alerta-ignorar:hover { background: var(--success); color: #fff; border-color: var(--success); } /* ── BADGE DE ABA (dashboard) ── */ .badge-aba { display: inline-block; margin-left: 6px; font-size: 0.86rem; font-family: 'JetBrains Mono', monospace; background: var(--primary-light); color: var(--primary-texto); padding: 1px 6px; border-radius: 10px; font-weight: 600; vertical-align: middle; } /* ══ ABAS TELA UNIFICADA RELATÓRIOS ══════════════════ */ .rel-aba-conteudo { animation: fadeSlideIn 0.18s ease; } /* As outras vinte abas do sistema, que trocavam secas (22/09/2026). Cadastros tem sete, o Analitico seis, Fretes quatro e Sistema tres, e nenhuma delas animava, enquanto a troca de TELA e as abas do Historico ja faziam isto desde sempre. Nao era escolha: era esta regra, que existia so para a classe do Historico. Medido: 8,9 ms a mais por troca, metade de um quadro a 60 fps, e as duas propriedades animadas sao compostas pela GPU. */ .aba-conteudo, .sistema-aba-conteudo { animation: fadeSlideIn 0.18s ease; } /* ══ BUSCA GLOBAL: REDESIGN ═════════════════════════ */ .busca-global-modal { padding: 0 !important; overflow: hidden; border-radius: var(--radius-xl) !important; } .busca-global-header { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--border-light); background: var(--surface); } .busca-global-icone { width: 20px; height: 20px; color: var(--text-muted); flex-shrink: 0; } .busca-global-input { flex: 1; border: none !important; background: transparent !important; font-size: 1rem !important; color: var(--text) !important; padding: 0 !important; box-shadow: none !important; outline: none !important; font-family: 'DM Sans', sans-serif; } .busca-global-input:focus { border: none !important; box-shadow: none !important; } /* 420 px, ou menos em janela baixa: no notebook com zoom (530 px de janela) e no celular deitado, o campo de busca e os resultados não cabiam juntos. Os 170 px são o campo, o rodapé de atalhos e o recuo da camada escura; a faixa da demonstração, quando existe, sai também. */ .busca-global-resultados { max-height: min(420px, calc(100vh - var(--faixa-demo-h) - 170px)); overflow-y: auto; padding: 8px; } .busca-global-resultados::-webkit-scrollbar { width: 4px; } .busca-global-resultados::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; } .busca-global-footer { display: flex; gap: 20px; padding: 10px 20px; border-top: 1px solid var(--border-light); background: var(--surface-alt); font-size: 0.86rem; color: var(--text-light); } .busca-kbd { display: inline-flex; align-items: center; justify-content: center; padding: 2px 6px; background: var(--surface-raised); border: 1px solid var(--border-strong); border-radius: 4px; font-size: 0.86rem; font-family: 'JetBrains Mono', monospace; color: var(--text-muted); line-height: 1.4; margin: 0 2px; } .busca-kbd-esc { cursor: pointer; transition: all 0.15s; flex-shrink: 0; } .busca-kbd-esc:hover { background: var(--danger-light); border-color: var(--danger); color: var(--danger); } .td-vazio { color: var(--text-muted) !important; } .dica { color: var(--text-muted) !important; } .sidebar-item { color: rgba(255,255,255,0.68); } .sidebar-item:hover { background: rgba(255,255,255,0.09); color: rgba(255,255,255,0.93); } .campo label { color: var(--text-muted); font-size: 0.86rem; } /* ===================================================== EMPRESA ATIVA: Badge no header ===================================================== */ .empresa-ativa-badge { display:flex; align-items:center; gap:5px; background: var(--primary-subtle); border:1px solid var(--primary); color:var(--primary); border-radius:20px; padding:4px 10px; font-size:0.893rem; font-weight:600; cursor:pointer; transition:background 0.15s; white-space:nowrap; } .empresa-ativa-badge:hover { background: var(--primary-subtle4); } /* O badge virou