/* ===================================================================== GDesk — Design System GD Soluções — Sistema de Controle de Chamados Paleta: azul-tinta profundo (confiança/profissionalismo) + âmbar quente (destaque/ação) sobre um cinza-gelo neutro. Tipografia: Space Grotesk (títulos, geométrica e um pouco técnica) + Inter (corpo/interface, alta legibilidade) + JetBrains Mono (números de chamado, códigos, timestamps — reforça a ideia de "protocolo"). ===================================================================== */ :root { /* Cores — marca */ --cor-primaria: #1D2B4F; --cor-primaria-clara: #2E4270; --cor-primaria-escura: #131D38; --cor-acento: #E8A33D; --cor-acento-escuro: #C7822A; /* Cores — superfícies e texto */ --cor-fundo: #F5F6F8; --cor-superficie: #FFFFFF; --cor-borda: #E2E5EA; --cor-borda-forte: #C7CCD4; --cor-texto: #1A1F2B; --cor-texto-suave: #5B6472; --cor-texto-fraco: #8B93A1; --cor-titulo: var(--cor-primaria); /* Cores — status (usadas em badges de chamado, alertas etc.) */ --cor-sucesso: #2F9E63; --cor-sucesso-fundo: #E7F6EE; --cor-alerta: #C7822A; --cor-alerta-fundo: #FBF0DD; --cor-perigo: #D64545; --cor-perigo-fundo: #FBEAEA; --cor-info: #3B76C4; --cor-info-fundo: #E9F1FB; /* Tipografia */ --fonte-display: 'Space Grotesk', 'Segoe UI', sans-serif; --fonte-corpo: 'Inter', 'Segoe UI', sans-serif; --fonte-mono: 'JetBrains Mono', 'Consolas', monospace; /* Espaçamento */ --espaco-1: 4px; --espaco-2: 8px; --espaco-3: 12px; --espaco-4: 16px; --espaco-5: 24px; --espaco-6: 32px; --espaco-7: 48px; --espaco-8: 64px; /* Formas — cantos mais arredondados e sombras mais suaves/profundas do que o padrão anterior, para uma leitura mais "app moderno" e menos "formulário quadrado" nos cartões, modais e campos. */ --raio: 14px; --raio-pequeno: 9px; --raio-grande: 20px; --sombra: 0 1px 2px rgba(19, 29, 56, 0.05), 0 6px 20px rgba(19, 29, 56, 0.07); --sombra-forte: 0 12px 40px rgba(19, 29, 56, 0.18); /* Fundo de destaque para item selecionado/não-lido em listas (perfis, grupos, notificações etc.) — variável própria (em vez de um valor fixo) porque precisa de um tom diferente no tema escuro, senão vira uma caixa clara destoando do resto da tela. */ --cor-selecao-fundo: #EEF1FF; color-scheme: light; } /* --------------------------------------------------------------------- Tema escuro — mesmo sistema de variáveis, valores diferentes. Ativado via [data-tema="escuro"] no (ver js/tema.js). --------------------------------------------------------------------- */ :root[data-tema="escuro"] { --cor-fundo: #10151F; --cor-superficie: #1A2233; --cor-borda: #2A3348; --cor-borda-forte: #3C4760; --cor-texto: #E8EAEE; --cor-texto-suave: #A8AFBD; --cor-texto-fraco: #6E778C; --cor-titulo: #9FB4E8; --cor-sucesso-fundo: rgba(47, 158, 99, 0.16); --cor-alerta-fundo: rgba(199, 130, 42, 0.18); --cor-perigo-fundo: rgba(214, 69, 69, 0.16); --cor-info-fundo: rgba(59, 118, 196, 0.18); --sombra: 0 1px 2px rgba(0, 0, 0, 0.25), 0 4px 16px rgba(0, 0, 0, 0.3); --sombra-forte: 0 8px 32px rgba(0, 0, 0, 0.45); --cor-selecao-fundo: rgba(159, 180, 232, 0.14); color-scheme: dark; } /* --------------------------------------------------------------------- Reset e base --------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: var(--fonte-corpo); background: var(--cor-fundo); color: var(--cor-texto); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; transition: background-color 0.2s ease, color 0.2s ease; } h1, h2, h3, h4 { font-family: var(--fonte-display); font-weight: 600; color: var(--cor-titulo); margin: 0 0 var(--espaco-3) 0; letter-spacing: -0.01em; } h1 { font-size: 28px; } h2 { font-size: 22px; } h3 { font-size: 17px; } p { margin: 0 0 var(--espaco-3) 0; } a { color: var(--cor-titulo); text-decoration: none; } a:hover { text-decoration: underline; } code, .mono { font-family: var(--fonte-mono); } /* Foco visível — acessibilidade, não removemos o outline, só estilizamos */ :focus-visible { outline: 2px solid var(--cor-acento); outline-offset: 2px; } /* Respeita preferência de menos movimento */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } /* --------------------------------------------------------------------- Botões --------------------------------------------------------------------- */ .botao { display: inline-flex; align-items: center; justify-content: center; gap: var(--espaco-2); font-family: var(--fonte-corpo); font-size: 14px; font-weight: 600; padding: 11px 20px; border-radius: var(--raio-pequeno); border: 1px solid transparent; cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease; text-decoration: none; white-space: nowrap; } .botao:active { transform: translateY(1px) scale(0.99); } .botao-primario { background: var(--cor-primaria); color: #fff; box-shadow: 0 1px 2px rgba(19, 29, 56, 0.12), 0 4px 12px rgba(19, 29, 56, 0.14); } .botao-primario:hover { background: var(--cor-primaria-clara); box-shadow: 0 2px 4px rgba(19, 29, 56, 0.14), 0 6px 18px rgba(19, 29, 56, 0.18); transform: translateY(-1px); } .botao-acento { background: var(--cor-acento); color: var(--cor-primaria-escura); box-shadow: 0 1px 2px rgba(199, 130, 42, 0.18), 0 4px 12px rgba(199, 130, 42, 0.2); } .botao-acento:hover { background: var(--cor-acento-escuro); color: #fff; box-shadow: 0 2px 4px rgba(199, 130, 42, 0.2), 0 6px 18px rgba(199, 130, 42, 0.25); transform: translateY(-1px); } .botao-secundario { background: var(--cor-superficie); color: var(--cor-titulo); border-color: var(--cor-borda-forte); } .botao-secundario:hover { background: var(--cor-fundo); border-color: var(--cor-texto-fraco); } .botao-perigo { background: var(--cor-superficie); color: var(--cor-perigo); border-color: var(--cor-perigo); } .botao-perigo:hover { background: var(--cor-perigo-fundo); } .botao-texto { background: transparent; color: var(--cor-titulo); padding: 6px 8px; } .botao-texto:hover { text-decoration: underline; } .botao:disabled { opacity: 0.55; cursor: not-allowed; } .botao-bloco { width: 100%; } /* --------------------------------------------------------------------- Formulários --------------------------------------------------------------------- */ /* --------------------------------------------------------------------- Campos de formulário — estilo global, não só dentro de .campo. Antes só os campos de modal (.campo) recebiam essa aparência; painéis laterais (.campo-lateral), barras de filtro (.barra-filtros) e outras telas ficavam com o cru do navegador (quadrado, sem padding, seta genérica). Agora todo campo de texto e todo — o "spinner" do navegador é o principal culpado de um campo parecer datado/quadrado mesmo com o resto do estilo customizado. */ input[type="number"] { -moz-appearance: textfield; } input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .campo { margin-bottom: var(--espaco-4); } .campo label { display: block; font-size: 13px; font-weight: 600; color: var(--cor-texto-suave); margin-bottom: var(--espaco-2); } .campo .dica { font-size: 12.5px; color: var(--cor-texto-fraco); margin-top: var(--espaco-1); } .campo .erro { font-size: 12.5px; color: var(--cor-perigo); margin-top: var(--espaco-1); display: none; } .campo.com-erro input, .campo.com-erro select { border-color: var(--cor-perigo); } .campo.com-erro .erro { display: block; } /* --------------------------------------------------------------------- Cartões e superfícies --------------------------------------------------------------------- */ .cartao { background: var(--cor-superficie); border: 1px solid var(--cor-borda); border-radius: var(--raio); box-shadow: var(--sombra); } /* --------------------------------------------------------------------- Painel de duas colunas (lista selecionável + detalhe) — usado em Permissões, Checklists, Categorias, Clientes, Campos Personalizados, Grupos de Agentes e no detalhe de chamado. Antes cada tela duplicava essas regras no próprio