@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap'); /* ========================================================================== TEMA OURO + PRETO — Identidade visual do JG TECH ERP ========================================================================== Cobre telas Tailwind (painel/admin/login) e Bootstrap (operação/PDV). Só aparência — não muda comportamento. Estrutura: - Identidade dourada (barras, botões, abas): SEMPRE aplicada. - Fundo escuro: só quando o tem a classe .tema-escuro. Assim o tema CLARO é o padrão e o ESCURO é opcional (botão). ========================================================================== */ :root { --ouro: #c9a227; --ouro-claro: #e6c34e; --ouro-escuro: #a5851c; --preto: #0d0f14; --grafite: #1a1d26; --grafite-claro: #2a2e3a; --cinza-texto: #6c757d; } /* ========================================================================== IDENTIDADE DOURADA — vale nos dois temas ========================================================================== */ /* Barras de topo escuras com fio dourado */ nav.bg-slate-900, .navbar.bg-dark, .navbar-dark.bg-dark { background: linear-gradient(90deg, var(--preto), var(--grafite), var(--preto)) !important; border-bottom: 2px solid var(--ouro) !important; } /* Badges de destaque nas topbars */ nav .bg-blue-600, nav .bg-indigo-600 { background-color: var(--ouro) !important; color: #1a1d26 !important; } /* Botão dourado (Bootstrap warning) */ .btn-warning { background-color: var(--ouro) !important; border-color: var(--ouro) !important; color: #1a1d26 !important; } .btn-warning:hover { background-color: var(--ouro-escuro) !important; border-color: var(--ouro-escuro) !important; color: #1a1d26 !important; } /* Botão primário grafite */ .btn-primary { background-color: var(--grafite) !important; border-color: var(--grafite) !important; color: #fff !important; } .btn-primary:hover { background-color: #000 !important; border-color: #000 !important; } /* Botões de ação Tailwind (indigo/blue/amber) para dourado */ .bg-indigo-600:not(nav .bg-indigo-600), .bg-blue-600:not(nav .bg-blue-600) { background-color: var(--ouro) !important; color: #1a1d26 !important; } .hover\:bg-indigo-700:hover, .hover\:bg-blue-700:hover { background-color: var(--ouro-escuro) !important; } .bg-amber-600 { background-color: var(--ouro) !important; color: #1a1d26 !important; } .hover\:bg-amber-700:hover { background-color: var(--ouro-escuro) !important; } .text-ouro { color: var(--ouro) !important; } /* Abas com destaque dourado */ .nav-pills .nav-link.active { background: var(--grafite) !important; color: var(--ouro) !important; } .nav-tabs .nav-link.active { color: var(--grafite) !important; border-bottom: 3px solid var(--ouro) !important; background: transparent !important; } /* Foco de formulário dourado */ .form-control:focus, .form-select:focus { border-color: var(--ouro) !important; box-shadow: 0 0 0 0.2rem rgba(201, 162, 39, 0.15) !important; } .focus\:ring-blue-500:focus, .focus\:ring-indigo-500:focus { --tw-ring-color: rgba(201, 162, 39, 0.4) !important; border-color: var(--ouro) !important; } .text-blue-600 { color: var(--ouro-escuro) !important; } /* ========================================================================== TEMA ESCURO — só quando ========================================================================== */ body.tema-escuro.bg-gray-100, body.tema-escuro { background: linear-gradient(135deg, #0b0d12 0%, #14171f 50%, #0b0d12 100%) !important; color: #e8e8ea; } /* -------------------------------------------------------------------------- TEXTOS SOBRE O FUNDO ESCURO -------------------------------------------------------------------------- No tema escuro, textos escuros do Tailwind (text-gray-900/800/700/600/500) ficam claros por padrão. Depois, DENTRO de qualquer bloco de fundo branco (cards, tabelas, modais), eles voltam a ser escuros — garantindo leitura nos dois contextos. -------------------------------------------------------------------------- */ body.tema-escuro .text-gray-900, body.tema-escuro .text-gray-800, body.tema-escuro .text-gray-700, body.tema-escuro .text-gray-600, body.tema-escuro .text-gray-500 { color: #e8e8ea !important; } /* Dentro de fundos claros, restaura o texto escuro para manter contraste */ body.tema-escuro .bg-white .text-gray-900, body.tema-escuro .bg-white .text-gray-800, body.tema-escuro .bg-white .text-gray-700, body.tema-escuro .bg-gray-50 .text-gray-900, body.tema-escuro .bg-gray-50 .text-gray-800, body.tema-escuro .bg-gray-50 .text-gray-700 { color: #1a1d26 !important; } body.tema-escuro .bg-white .text-gray-600, body.tema-escuro .bg-white .text-gray-500, body.tema-escuro .bg-gray-50 .text-gray-600, body.tema-escuro .bg-gray-50 .text-gray-500 { color: #6c757d !important; } /* Botões escuros de voltar/sair: texto claro visível no tema escuro */ body.tema-escuro nav .bg-slate-700, body.tema-escuro .bg-slate-700, body.tema-escuro a.bg-gray-800, body.tema-escuro button.bg-gray-800, body.tema-escuro a.bg-gray-700, body.tema-escuro button.bg-gray-700, body.tema-escuro a.bg-slate-800, body.tema-escuro button.bg-slate-800 { background-color: var(--grafite-claro) !important; color: #f5f5f7 !important; } body.tema-escuro .hover\:bg-slate-600:hover { background-color: #3a3f4d !important; } /* -------------------------------------------------------------------------- CAMPOS DE FORMULÁRIO NO TEMA ESCURO -------------------------------------------------------------------------- Sem isto, inputs/selects herdam texto claro do body mas ficam com fundo transparente/claro — texto some. Aqui damos fundo escuro + texto claro, deixando os campos legíveis em qualquer tela. -------------------------------------------------------------------------- */ body.tema-escuro input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]), body.tema-escuro select, body.tema-escuro textarea, body.tema-escuro .form-control, body.tema-escuro .form-select { background-color: #1c2029 !important; color: #e8e8ea !important; border-color: #3a3f4d !important; } body.tema-escuro input::placeholder, body.tema-escuro textarea::placeholder, body.tema-escuro .form-control::placeholder { color: #8a909c !important; } body.tema-escuro .input-group-text { background-color: #23262f !important; color: #e8e8ea !important; border-color: #3a3f4d !important; } /* Corrige o ícone do seletor de data (calendário) ficar visível no escuro */ body.tema-escuro input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(0.8); } /* -------------------------------------------------------------------------- MAIS FUNDOS CLAROS: restaura texto escuro (a regra original só cobria .bg-white e .bg-gray-50). Aqui incluímos os demais fundos claros comuns. -------------------------------------------------------------------------- */ body.tema-escuro .bg-gray-100 .text-gray-900, body.tema-escuro .bg-gray-100 .text-gray-800, body.tema-escuro .bg-gray-100 .text-gray-700, body.tema-escuro .bg-slate-50 .text-gray-900, body.tema-escuro .bg-slate-50 .text-gray-800, body.tema-escuro .bg-slate-50 .text-gray-700, body.tema-escuro .bg-light .text-gray-900, body.tema-escuro .bg-light .text-gray-800, body.tema-escuro .bg-light .text-gray-700 { color: #1a1d26 !important; } body.tema-escuro .bg-gray-100 .text-gray-600, body.tema-escuro .bg-gray-100 .text-gray-500, body.tema-escuro .bg-slate-50 .text-gray-600, body.tema-escuro .bg-slate-50 .text-gray-500, body.tema-escuro .bg-light .text-gray-600, body.tema-escuro .bg-light .text-gray-500 { color: #6c757d !important; } /* ========================================================================== TIPOGRAFIA E ESPAÇAMENTO PADRÃO (aplicado a todas as telas) ========================================================================== Fonte Inter: moderna, legível e neutra — padrão de mercado em ERPs. Importada via Google Fonts no das telas (ou cai no fallback). ========================================================================== */ body { font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Hierarquia de títulos mais equilibrada e consistente */ h1, .h1 { font-size: 1.6rem; font-weight: 700; letter-spacing: -0.01em; } h2, .h2 { font-size: 1.35rem; font-weight: 700; letter-spacing: -0.01em; } h3, .h3 { font-size: 1.15rem; font-weight: 600; } h4, .h4 { font-size: 1.02rem; font-weight: 600; } h5, .h5 { font-size: 0.95rem; font-weight: 600; } h6, .h6 { font-size: 0.85rem; font-weight: 600; } /* Respiro padrão para cards (Bootstrap e Tailwind) */ .card { border-radius: 12px !important; } .card .card-body { padding: 1.25rem 1.35rem; } /* Tabelas com um pouco mais de respiro nas células */ .table > :not(caption) > * > * { padding: 0.7rem 0.75rem; } .table thead th { font-size: 0.72rem; letter-spacing: 0.4px; text-transform: uppercase; color: #8a8f99; } /* Botões com cantos e peso consistentes */ .btn { border-radius: 8px; font-weight: 600; } .btn-sm { border-radius: 6px; } /* Inputs e selects padronizados */ .form-control, .form-select { border-radius: 8px; } .form-label { font-weight: 600; font-size: 0.85rem; } /* Espaçamento vertical consistente entre blocos das páginas Tailwind */ .max-w-7xl { padding-left: 1rem; padding-right: 1rem; } /* ========================================================================== ASSISTENTE DE AJUDA (widget flutuante) — tema ouro + preto ========================================================================== */ #assistenteBotao { position: fixed !important; right: 22px !important; bottom: 22px !important; top: auto !important; left: auto !important; width: 60px !important; height: 60px !important; border-radius: 50% !important; border: none !important; padding: 0 !important; margin: 0 !important; background: linear-gradient(135deg, #d4af37, #b8912e) !important; color: #1a1d26 !important; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28) !important; cursor: pointer; z-index: 2147483000 !important; display: flex !important; align-items: center; justify-content: center; transition: transform 0.15s ease, box-shadow 0.15s ease; } #assistenteBotao:hover { transform: translateY(-2px) scale(1.05); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35); } #assistenteBotao .assistente-emoji { font-size: 1.7rem; line-height: 1; } /* Botão flutuante do WhatsApp de suporte — empilhado logo acima do bot. */ #whatsBotao { position: fixed !important; right: 22px !important; bottom: 92px !important; /* 22 (bot) + 60 (altura) + 10 de espaço */ top: auto !important; left: auto !important; width: 60px !important; height: 60px !important; border-radius: 50% !important; border: none !important; padding: 0 !important; margin: 0 !important; background: #25d366 !important; /* verde do WhatsApp */ color: #fff !important; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28) !important; cursor: pointer; z-index: 2147483000 !important; display: flex !important; align-items: center; justify-content: center; transition: transform 0.15s ease, box-shadow 0.15s ease; text-decoration: none !important; } #whatsBotao:hover { transform: translateY(-2px) scale(1.05); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35); } #whatsBotao i { font-size: 1.9rem; line-height: 1; } #assistentePainel { position: fixed !important; right: 22px !important; bottom: 94px !important; top: auto !important; left: auto !important; width: 350px !important; max-width: calc(100vw - 44px); height: 460px !important; max-height: calc(100vh - 140px); background: #ffffff; border-radius: 16px !important; box-shadow: 0 12px 34px rgba(0, 0, 0, 0.3) !important; border: 1px solid #e6e6e6; display: none; flex-direction: column; overflow: hidden; z-index: 2147483000 !important; } #assistentePainel.aberto { display: flex !important; } /* Cabeçalho em bloco: avatar + nome TECH + status online */ #assistenteHeader { background: linear-gradient(90deg, #1a1d26, #2a2e3a) !important; color: #ffffff; padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; border-bottom: 3px solid #d4af37; flex-shrink: 0; } .assistente-header-info { display: flex; align-items: center; gap: 10px; } .assistente-avatar { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, #d4af37, #b8912e); display: flex; align-items: center; justify-content: center; font-size: 1.3rem; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); flex-shrink: 0; } .assistente-header-textos { line-height: 1.2; } .assistente-nome { font-weight: 800; font-size: 1rem; letter-spacing: 0.5px; color: #d4af37; } .assistente-status { font-size: 0.72rem; color: #cfcfcf; display: flex; align-items: center; gap: 5px; } .assistente-online { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; display: inline-block; box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.25); } #assistenteFechar { background: none; border: none; color: #ffffff; font-size: 1.5rem; line-height: 1; cursor: pointer; opacity: 0.8; } #assistenteFechar:hover { opacity: 1; } #assistenteCorpo { flex: 1; overflow-y: auto; padding: 16px; background: #f4f4f6; display: flex; flex-direction: column; } /* Balões de conversa (estilo bolha arredondada) */ .assistente-msg { margin-bottom: 12px; padding: 11px 14px; font-size: 0.88rem; line-height: 1.45; max-width: 85%; word-wrap: break-word; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); } .assistente-bot { background: #ffffff; color: #1a1d26; border-radius: 4px 16px 16px 16px; align-self: flex-start; border-left: 3px solid #d4af37; } .assistente-user { background: linear-gradient(135deg, #d4af37, #b8912e); color: #1a1d26; align-self: flex-end; font-weight: 500; border-radius: 16px 16px 4px 16px; } .assistente-artigo-titulo { font-weight: 800; color: #b8912e; margin-bottom: 5px; } .tech-menu { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; } .tech-volta { margin-top: 6px; font-weight: 700; color: #b8912e; } .tech-opcao-mais { text-align: center; font-weight: 700; background: #f4f0e2; border-style: dashed; } body.tema-escuro .tech-opcao-mais { background: #23262f; } .tech-opcao { text-align: left; background: #fff; border: 1px solid #d4af37; color: #1a1d26; border-radius: 10px; padding: 8px 12px; font-size: 0.84rem; cursor: pointer; transition: background 0.12s ease; } .tech-opcao:hover { background: #fbf7e8; } body.tema-escuro .tech-opcao { background: #1c2029; color: #e6e6e6; border-color: #b8912e; } body.tema-escuro .tech-opcao:hover { background: #23262f; } /* Botão de destaque "Falar com o suporte" */ .tech-opcao-suporte { background: linear-gradient(135deg, #d4af37, #b8912e); color: #1a1d26; font-weight: 700; border-color: #b8912e; text-align: center; } .tech-opcao-suporte:hover { background: linear-gradient(135deg, #e0bd4a, #c99f34); } body.tema-escuro .tech-opcao-suporte { background: linear-gradient(135deg, #d4af37, #b8912e); color: #1a1d26; border-color: #b8912e; } body.tema-escuro .tech-opcao-suporte:hover { background: linear-gradient(135deg, #e0bd4a, #c99f34); color: #1a1d26; } /* Formulário de mensagem para o suporte (dentro do chat) */ .tech-suporte { display: flex; flex-direction: column; gap: 6px; } .tech-suporte-titulo { font-weight: 700; margin-bottom: 2px; } .tech-suporte-label { font-size: 0.78rem; font-weight: 600; margin-top: 4px; } .tech-suporte-select, .tech-suporte-texto { width: 100%; border: 1px solid #d4af37; border-radius: 8px; padding: 7px 9px; font-size: 0.85rem; background: #fff; color: #1a1d26; box-sizing: border-box; font-family: inherit; resize: vertical; } .tech-suporte-enviar { margin-top: 6px; background: linear-gradient(135deg, #d4af37, #b8912e); color: #1a1d26; font-weight: 700; border: none; border-radius: 8px; padding: 8px 12px; cursor: pointer; transition: filter 0.12s ease; } .tech-suporte-enviar:hover { filter: brightness(1.05); } .tech-suporte-enviar:disabled { opacity: 0.6; cursor: default; } body.tema-escuro .tech-suporte-select, body.tema-escuro .tech-suporte-texto { background: #1c2029; color: #e6e6e6; border-color: #b8912e; } body.tema-escuro .tech-suporte-titulo, body.tema-escuro .tech-suporte-label { color: #e6e6e6; } .assistente-artigo-conteudo { white-space: pre-line; } #assistenteForm { display: flex; padding: 12px; gap: 8px; border-top: 1px solid #e6e6e6; background: #ffffff; flex-shrink: 0; } #assistenteInput { flex: 1; border: 1px solid #d0d0d0; border-radius: 22px; padding: 9px 16px; outline: none; font-size: 0.9rem; } #assistenteInput:focus { border-color: #d4af37; box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.22); } #assistenteEnviar { border: none; background: linear-gradient(135deg, #d4af37, #b8912e); color: #1a1d26; border-radius: 50%; width: 42px; height: 42px; min-width: 42px; cursor: pointer; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 1.15rem; padding: 0; transition: transform 0.12s ease; } #assistenteEnviar:hover { transform: scale(1.08); } /* Modo escuro */ body.tema-escuro #assistentePainel { background: #14171f; border-color: #2a2e3a; } body.tema-escuro #assistenteCorpo { background: #0f1218; } body.tema-escuro .assistente-bot { background: #1c2029; color: #e6e6e6; } body.tema-escuro #assistenteForm { background: #14171f; border-top-color: #2a2e3a; } body.tema-escuro #assistenteInput { background: #0f1218; border-color: #2a2e3a; color: #e6e6e6; } /* ========================================================================== NOTIFICAÇÕES IN-APP (sininho) — tema ouro + preto ========================================================================== */ #sinoBotao { position: fixed !important; left: 22px !important; /* canto ESQUERDO, longe do assistente (direita) */ bottom: 22px !important; top: auto !important; right: auto !important; width: 52px !important; height: 52px !important; border-radius: 50% !important; border: none !important; padding: 0 !important; margin: 0 !important; background: #1a1d26 !important; color: #d4af37 !important; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28) !important; cursor: pointer; z-index: 2147483000 !important; display: flex !important; align-items: center; justify-content: center; transition: transform 0.15s ease; } #sinoBotao:hover { transform: translateY(-2px) scale(1.05); } #sinoBotao .sino-emoji { font-size: 1.4rem; line-height: 1; } .sino-badge { position: absolute; top: -4px; right: -4px; background: #e11d48; color: #fff; font-size: 0.7rem; font-weight: 800; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; display: flex; align-items: center; justify-content: center; border: 2px solid #fff; } #sinoPainel { position: fixed !important; left: 22px !important; bottom: 84px !important; top: auto !important; right: auto !important; width: 320px !important; max-width: calc(100vw - 44px); max-height: 420px; background: #ffffff; border-radius: 14px !important; box-shadow: 0 12px 34px rgba(0, 0, 0, 0.3) !important; border: 1px solid #e6e6e6; display: none; flex-direction: column; overflow: hidden; z-index: 2147483000 !important; } #sinoPainel.aberto { display: flex !important; } #sinoHeader { background: linear-gradient(90deg, #1a1d26, #2a2e3a); color: #fff; padding: 12px 16px; font-weight: bold; display: flex; align-items: center; justify-content: space-between; border-bottom: 2px solid #d4af37; } #sinoFechar { background: none; border: none; color: #fff; font-size: 1.4rem; line-height: 1; cursor: pointer; } #sinoCorpo { overflow-y: auto; padding: 8px; background: #f7f7f8; } .sino-vazio { text-align: center; color: #999; font-size: 0.85rem; padding: 24px 10px; } .sino-item { background: #fff; border: 1px solid #ececec; border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; } .sino-item.sino-nao-lida { border-left: 4px solid #d4af37; background: #fffdf5; } .sino-item-titulo { font-weight: 700; font-size: 0.86rem; color: #1a1d26; } .sino-item-msg { font-size: 0.82rem; color: #444; margin-top: 2px; } .sino-item-data { font-size: 0.72rem; color: #999; margin-top: 4px; text-align: right; } /* Modo escuro */ body.tema-escuro #sinoPainel { background: #14171f; border-color: #2a2e3a; } body.tema-escuro #sinoCorpo { background: #0f1218; } body.tema-escuro .sino-item { background: #1c2029; border-color: #2a2e3a; } body.tema-escuro .sino-item.sino-nao-lida { background: #23262f; } body.tema-escuro .sino-item-titulo { color: #e6e6e6; } body.tema-escuro .sino-item-msg { color: #c9c9c9; } /* ========================================================================== IMPRESSÃO — esconde elementos flutuantes e utilitários que não devem sair no papel (botão do assistente TECH, sino de notificações, WhatsApp, avisos flutuantes e tudo marcado com .no-print). Vale para todas as telas que carregam este tema, inclusive os relatórios imprimíveis. ========================================================================== */ @media print { #assistenteBotao, #assistentePainel, #sinoBotao, #sinoPainel, #whatsBotao, #modalWhatsSuporte, #avisoProntos, .no-print { display: none !important; } /* Margem enxuta para o conteúdo aproveitar melhor a folha. */ @page { margin: 12mm; } body { background: #fff !important; } }