/* Tema "Azul Liquid Glass" do TecGestor. Ativo quando (quem liga/desliga é js/tg-tema.js). A paleta é a mesma do cartão "Resumo do mês": fundo azul-noite com luz ciano, vidro translúcido, bordas azuladas e acentos #35c2ff / #2f9bff / #155fb0 com o laranja do logo. Como funciona: o tema azul sempre roda sobre o modo escuro, então basta repintar as classes do modo escuro que as páginas já usam (dark:bg-dark-card, dark:text-gray-400...) e os estilos próprios de cada página. Tudo fica restrito a [data-tema="azul"]: com o tema Padrão este arquivo não altera nada. Desempenho: desfoque (backdrop-filter) só nas camadas flutuantes (barra do topo, menu inferior, modais e painéis). Os cartões usam só cor translúcida sobre o fundo, que já dá o efeito de vidro sem custo de GPU em listas longas. */ :root:is([data-tema="azul"], [data-tema="vidro"]).dark { --tga-fundo: #03060d; --tga-fundo2: #0b1a33; --tga-card: rgba(13, 24, 44, 0.74); --tga-card-solido: #0b1528; --tga-card-forte: rgba(12, 22, 41, 0.92); --tga-elev: rgba(26, 44, 76, 0.62); --tga-elev2: rgba(36, 58, 98, 0.66); --tga-afundado: rgba(4, 10, 22, 0.55); --tga-campo: rgba(5, 12, 26, 0.72); --tga-borda: rgba(120, 170, 255, 0.14); --tga-borda2: rgba(120, 170, 255, 0.24); --tga-borda3: rgba(120, 170, 255, 0.36); --tga-reflexo: inset 0 1px 0 rgba(255, 255, 255, 0.06); --tga-sombra: 0 18px 40px -18px rgba(0, 10, 40, 0.75); --tga-t1: #f1f6ff; --tga-t2: #dde7f5; --tga-t3: #bccadf; --tga-t4: #9fb0c8; --tga-t5: #7f91ab; --tga-t6: #5f7190; --tga-a1: #35c2ff; --tga-a2: #2f9bff; --tga-a3: #155fb0; --tga-a-claro: #8fd9ff; --tga-laranja: #ff8a1f; --tga-hover: rgba(47, 155, 255, 0.1); --tga-hover2: rgba(47, 155, 255, 0.16); --tga-vidro-flutuante: rgba(7, 14, 29, 0.66); color-scheme: dark; background-color: var(--tga-fundo) !important; } /* ---------- fundo da página: luz ciano no topo e azul profundo embaixo ---------- */ :root:is([data-tema="azul"], [data-tema="vidro"]).dark body { background-color: transparent !important; color: var(--tga-t2); } :root:is([data-tema="azul"], [data-tema="vidro"]).dark body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(1100px 620px at 50% -12%, rgba(47, 155, 255, 0.2), transparent 62%), radial-gradient(800px 560px at 108% 104%, rgba(21, 95, 176, 0.2), transparent 60%), radial-gradient(520px 380px at -10% 60%, rgba(53, 194, 255, 0.07), transparent 65%), linear-gradient(180deg, #07111f 0%, #03060d 100%); } /* contêineres de página que pintavam preto por cima do fundo */ :root:is([data-tema="azul"], [data-tema="vidro"]).dark body.dark\:bg-dark-bg, :root:is([data-tema="azul"], [data-tema="vidro"]).dark body.dark\:bg-black, :root:is([data-tema="azul"], [data-tema="vidro"]).dark body.bg-gray-50, :root:is([data-tema="azul"], [data-tema="vidro"]).dark main.dark\:bg-dark-bg, :root:is([data-tema="azul"], [data-tema="vidro"]).dark main.dark\:bg-black, :root:is([data-tema="azul"], [data-tema="vidro"]).dark #app.dark\:bg-dark-bg { background-color: transparent !important; } :root:is([data-tema="azul"], [data-tema="vidro"]).dark .bg-pattern { background-image: radial-gradient(circle at 1px 1px, rgba(143, 217, 255, 0.05) 1px, transparent 0) !important; } /* troca suave entre temas (só durante a troca, para não pesar no uso normal) */ :root.tg-tema-trocando body, :root.tg-tema-trocando body * { transition: background-color 0.35s ease, border-color 0.35s ease, color 0.35s ease, box-shadow 0.35s ease !important; } /* ---------- superfícies (cartões, painéis, modais) ---------- */ :root:is([data-tema="azul"], [data-tema="vidro"]).dark .dark\:bg-dark-card, :root:is([data-tema="azul"], [data-tema="vidro"]).dark .dark\:bg-dark-card\/90, :root:is([data-tema="azul"], [data-tema="vidro"]).dark .dark\:bg-dark-card\/95, :root:is([data-tema="azul"], [data-tema="vidro"]).dark .dark\:bg-\[\#0c0c0c\], :root:is([data-tema="azul"], [data-tema="vidro"]).dark .dark\:bg-\[\#0a0a0a\], :root:is([data-tema="azul"], [data-tema="vidro"]).dark .dark\:bg-\[\#111\], :root:is([data-tema="azul"], [data-tema="vidro"]).dark .dark\:bg-\[\#111111\], :root:is([data-tema="azul"], [data-tema="vidro"]).dark .dark\:bg-\[\#121212\], :root:is([data-tema="azul"], [data-tema="vidro"]).dark .dark\:bg-\[\#141414\], :root:is([data-tema="azul"], [data-tema="vidro"]).dark .dark\:bg-\[\#171717\], :root:is([data-tema="azul"], [data-tema="vidro"]).dark .dark\:bg-gray-900, :root:is([data-tema="azul"], [data-tema="vidro"]).dark .dark\:bg-slate-900, :root:is([data-tema="azul"], [data-tema="vidro"]).dark .dark\:bg-neutral-900, :root:is([data-tema="azul"], [data-tema="vidro"]).dark .dark\:bg-zinc-900 { background-color: var(--tga-card) !important; } :root:is([data-tema="azul"], [data-tema="vidro"]).dark .dark\:bg-dark-card.rounded-2xl, :root:is([data-tema="azul"], [data-tema="vidro"]).dark .dark\:bg-dark-card.rounded-3xl, :root:is([data-tema="azul"], [data-tema="vidro"]).dark .dark\:bg-dark-card.rounded-xl, :root:is([data-tema="azul"], [data-tema="vidro"]).dark .dark\:bg-\[\#0c0c0c\].rounded-2xl, :root:is([data-tema="azul"], [data-tema="vidro"]).dark .dark\:bg-gray-900.rounded-2xl { box-shadow: var(--tga-reflexo), var(--tga-sombra) !important; } :root:is([data-tema="azul"], [data-tema="vidro"]).dark .dark\:bg-gray-800, :root:is([data-tema="azul"], [data-tema="vidro"]).dark .dark\:bg-slate-800, :root:is([data-tema="azul"], [data-tema="vidro"]).dark .dark\:bg-neutral-800, :root:is([data-tema="azul"], [data-tema="vidro"]).dark .dark\:bg-zinc-800 { background-color: var(--tga-elev) !important; } :root:is([data-tema="azul"], [data-tema="vidro"]).dark .dark\:bg-gray-700, :root:is([data-tema="azul"], [data-tema="vidro"]).dark .dark\:bg-gray-600, :root:is([data-tema="azul"], [data-tema="vidro"]).dark .dark\:bg-slate-700, :root:is([data-tema="azul"], [data-tema="vidro"]).dark .dark\:bg-neutral-700 { background-color: var(--tga-elev2) !important; } :root:is([data-tema="azul"], [data-tema="vidro"]).dark .dark\:bg-gray-800\/50, :root:is([data-tema="azul"], [data-tema="vidro"]).dark .dark\:bg-gray-800\/40, :root:is([data-tema="azul"], [data-tema="vidro"]).dark .dark\:bg-gray-800\/60, :root:is([data-tema="azul"], [data-tema="vidro"]).dark .dark\:bg-gray-800\/30 { background-color: rgba(26, 44, 76, 0.4) !important; } :root:is([data-tema="azul"], [data-tema="vidro"]).dark .dark\:bg-gray-900\/50, :root:is([data-tema="azul"], [data-tema="vidro"]).dark .dark\:bg-gray-900\/40, :root:is([data-tema="azul"], [data-tema="vidro"]).dark .dark\:bg-gray-900\/30, :root:is([data-tema="azul"], [data-tema="vidro"]).dark .dark\:bg-gray-900\/20, :root:is([data-tema="azul"], [data-tema="vidro"]).dark .dark\:bg-gray-900\/60, :root:is([data-tema="azul"], [data-tema="vidro"]).dark .dark\:bg-gray-900\/80 { background-color: var(--tga-afundado) !important; } :root:is([data-tema="azul"], [data-tema="vidro"]).dark .dark\:bg-dark-bg, :root:is([data-tema="azul"], [data-tema="vidro"]).dark .dark\:bg-black { background-color: rgba(4, 9, 19, 0.82) !important; } :root:is([data-tema="azul"], [data-tema="vidro"]).dark .dark\:bg-white\/5 { background-color: rgba(143, 200, 255, 0.05) !important; } :root:is([data-tema="azul"], [data-tema="vidro"]).dark .dark\:bg-white\/10 { background-color: rgba(143, 200, 255, 0.09) !important; } /* hover das superfícies escuras vira brilho azul */ :root:is([data-tema="azul"], [data-tema="vidro"]).dark .dark\:hover\:bg-gray-800:hover, :root:is([data-tema="azul"], [data-tema="vidro"]).dark .dark\:hover\:bg-gray-800\/50:hover, :root:is([data-tema="azul"], [data-tema="vidro"]).dark .dark\:hover\:bg-gray-800\/40:hover, :root:is([data-tema="azul"], [data-tema="vidro"]).dark .dark\:hover\:bg-gray-800\/30:hover, :root:is([data-tema="azul"], [data-tema="vidro"]).dark .dark\:hover\:bg-gray-900\/40:hover, :root:is([data-tema="azul"], [data-tema="vidro"]).dark .dark\:hover\:bg-slate-800\/50:hover, :root:is([data-tema="azul"], [data-tema="vidro"]).dark .dark\:hover\:bg-white\/5:hover, :root:is([data-tema="azul"], [data-tema="vidro"]).dark .dark\:hover\:bg-dark-card\/50:hover { background-color: var(--tga-hover) !important; } :root:is([data-tema="azul"], [data-tema="vidro"]).dark .dark\:hover\:bg-gray-700:hover, :root:is([data-tema="azul"], [data-tema="vidro"]).dark .dark\:hover\:bg-gray-600:hover, :root:is([data-tema="azul"], [data-tema="vidro"]).dark .dark\:hover\:bg-white\/10:hover, :root:is([data-tema="azul"], [data-tema="vidro"]).dark .dark\:hover\:bg-slate-700:hover, :root:is([data-tema="azul"], [data-tema="vidro"]).dark .dark\:hover\:bg-neutral-700:hover { background-color: var(--tga-hover2) !important; } /* ---------- bordas e divisórias ---------- */ :root:is([data-tema="azul"], [data-tema="vidro"]).dark .dark\:border-dark-border, :root:is([data-tema="azul"], [data-tema="vidro"]).dark .dark\:border-gray-800, :root:is([data-tema="azul"], [data-tema="vidro"]).dark .dark\:border-gray-800\/50, :root:is([data-tema="azul"], [data-tema="vidro"]).dark .dark\:border-gray-800\/60, :root:is([data-tema="azul"], [data-tema="vidro"]).dark .dark\:border-slate-800, :root:is([data-tema="azul"], [data-tema="vidro"]).dark .dark\:border-white\/5, :root:is([data-tema="azul"], [data-tema="vidro"]).dark .dark\:border-dark-card { border-color: var(--tga-borda) !important; } :root:is([data-tema="azul"], [data-tema="vidro"]).dark .dark\:border-gray-700, :root:is([data-tema="azul"], [data-tema="vidro"]).dark .dark\:border-gray-600, :root:is([data-tema="azul"], [data-tema="vidro"]).dark .dark\:border-slate-700, :root:is([data-tema="azul"], [data-tema="vidro"]).dark .dark\:border-slate-700\/50, :root:is([data-tema="azul"], [data-tema="vidro"]).dark .dark\:border-white\/10 { border-color: var(--tga-borda2) !important; } :root:is([data-tema="azul"], [data-tema="vidro"]).dark .dark\:divide-gray-800 > :not(:last-child), :root:is([data-tema="azul"], [data-tema="vidro"]).dark .dark\:divide-dark-border > :not(:last-child), :root:is([data-tema="azul"], [data-tema="vidro"]).dark .dark\:divide-gray-700 > :not(:last-child) { border-color: var(--tga-borda) !important; } :root:is([data-tema="azul"], [data-tema="vidro"]).dark .dark\:ring-white\/5, :root:is([data-tema="azul"], [data-tema="vidro"]).dark .dark\:ring-dark-card { --tw-ring-color: var(--tga-borda) !important; } /* ---------- texto ---------- */ :root:is([data-tema="azul"], [data-tema="vidro"]).dark .dark\:text-white { color: var(--tga-t1) !important; } :root:is([data-tema="azul"], [data-tema="vidro"]).dark .dark\:text-gray-100 { color: var(--tga-t1) !important; } :root:is([data-tema="azul"], [data-tema="vidro"]).dark .dark\:text-gray-200 { color: var(--tga-t2) !important; } :root:is([data-tema="azul"], [data-tema="vidro"]).dark .dark\:text-gray-300 { color: var(--tga-t3) !important; } :root:is([data-tema="azul"], [data-tema="vidro"]).dark .dark\:text-gray-400, :root:is([data-tema="azul"], [data-tema="vidro"]).dark .dark\:text-slate-400 { color: var(--tga-t4) !important; } :root:is([data-tema="azul"], [data-tema="vidro"]).dark .dark\:text-gray-500, :root:is([data-tema="azul"], [data-tema="vidro"]).dark .dark\:text-slate-500 { color: var(--tga-t5) !important; } :root:is([data-tema="azul"], [data-tema="vidro"]).dark .dark\:text-gray-600, :root:is([data-tema="azul"], [data-tema="vidro"]).dark .dark\:text-gray-700 { color: var(--tga-t6) !important; } :root:is([data-tema="azul"], [data-tema="vidro"]).dark .dark\:text-brand-400, :root:is([data-tema="azul"], [data-tema="vidro"]).dark .dark\:text-brand-500, :root:is([data-tema="azul"], [data-tema="vidro"]).dark .dark\:text-sky-400, :root:is([data-tema="azul"], [data-tema="vidro"]).dark .dark\:text-blue-400 { color: var(--tga-a1) !important; } :root:is([data-tema="azul"], [data-tema="vidro"]).dark .dark\:text-brand-300, :root:is([data-tema="azul"], [data-tema="vidro"]).dark .dark\:text-brand-200, :root:is([data-tema="azul"], [data-tema="vidro"]).dark .dark\:text-blue-300, :root:is([data-tema="azul"], [data-tema="vidro"]).dark .dark\:text-sky-300 { color: var(--tga-a-claro) !important; } :root:is([data-tema="azul"], [data-tema="vidro"]).dark .dark\:placeholder-gray-400::placeholder, :root:is([data-tema="azul"], [data-tema="vidro"]).dark .dark\:placeholder-gray-500::placeholder { color: var(--tga-t5) !important; } /* tons de marca translúcidos (selos, destaques) ficam no azul do tema */ :root:is([data-tema="azul"], [data-tema="vidro"]).dark .dark\:bg-brand-900\/20, :root:is([data-tema="azul"], [data-tema="vidro"]).dark .dark\:bg-brand-900\/30, :root:is([data-tema="azul"], [data-tema="vidro"]).dark .dark\:bg-brand-900\/10, :root:is([data-tema="azul"], [data-tema="vidro"]).dark .dark\:bg-brand-900\/40 { background-color: rgba(47, 155, 255, 0.14) !important; } :root:is([data-tema="azul"], [data-tema="vidro"]).dark .dark\:border-brand-800, :root:is([data-tema="azul"], [data-tema="vidro"]).dark .dark\:border-brand-700, :root:is([data-tema="azul"], [data-tema="vidro"]).dark .dark\:border-brand-900\/40 { border-color: rgba(53, 194, 255, 0.34) !important; } /* ---------- botões principais: gradiente azul do resumo ---------- */ :root:is([data-tema="azul"], [data-tema="vidro"]).dark .bg-brand-600, :root:is([data-tema="azul"], [data-tema="vidro"]).dark .bg-brand-500, :root:is([data-tema="azul"], [data-tema="vidro"]).dark .bg-blue-600 { background-color: var(--tga-a2) !important; background-image: linear-gradient(135deg, #2f9bff 0%, #1c74d6 55%, #155fb0 100%) !important; } :root:is([data-tema="azul"], [data-tema="vidro"]).dark button.bg-brand-600, :root:is([data-tema="azul"], [data-tema="vidro"]).dark a.bg-brand-600, :root:is([data-tema="azul"], [data-tema="vidro"]).dark button.bg-brand-500, :root:is([data-tema="azul"], [data-tema="vidro"]).dark a.bg-brand-500, :root:is([data-tema="azul"], [data-tema="vidro"]).dark button.bg-blue-600 { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 10px 24px -12px rgba(47, 155, 255, 0.7) !important; border-color: rgba(143, 217, 255, 0.28) !important; } :root:is([data-tema="azul"], [data-tema="vidro"]).dark .hover\:bg-brand-700:hover, :root:is([data-tema="azul"], [data-tema="vidro"]).dark .hover\:bg-brand-600:hover, :root:is([data-tema="azul"], [data-tema="vidro"]).dark .hover\:bg-blue-700:hover { background-image: linear-gradient(135deg, #45a8ff 0%, #2383e8 55%, #1a6bc4 100%) !important; } :root:is([data-tema="azul"], [data-tema="vidro"]).dark .text-brand-500, :root:is([data-tema="azul"], [data-tema="vidro"]).dark .text-brand-600 { color: var(--tga-a1) !important; } /* ---------- campos de formulário ---------- */ :root:is([data-tema="azul"], [data-tema="vidro"]).dark input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not(.bg-transparent):not([class*="opacity-0"]), :root:is([data-tema="azul"], [data-tema="vidro"]).dark select:not(.bg-transparent), :root:is([data-tema="azul"], [data-tema="vidro"]).dark textarea:not(.bg-transparent), :root:is([data-tema="azul"], [data-tema="vidro"]).dark .input-field, :root:is([data-tema="azul"], [data-tema="vidro"]).dark .field, :root:is([data-tema="azul"], [data-tema="vidro"]).dark .glass-input, :root:is([data-tema="azul"], [data-tema="vidro"]).dark .section-filter { background-color: var(--tga-campo) !important; border-color: var(--tga-borda2) !important; color: var(--tga-t1) !important; } :root:is([data-tema="azul"], [data-tema="vidro"]).dark input:focus:not([type="checkbox"]):not([type="radio"]):not([type="range"]), :root:is([data-tema="azul"], [data-tema="vidro"]).dark select:focus, :root:is([data-tema="azul"], [data-tema="vidro"]).dark textarea:focus, :root:is([data-tema="azul"], [data-tema="vidro"]).dark .input-field:focus, :root:is([data-tema="azul"], [data-tema="vidro"]).dark .glass-input:focus { background-color: rgba(8, 18, 38, 0.88) !important; border-color: var(--tga-a1) !important; box-shadow: 0 0 0 3px rgba(53, 194, 255, 0.16) !important; outline: none; } :root:is([data-tema="azul"], [data-tema="vidro"]).dark input::placeholder, :root:is([data-tema="azul"], [data-tema="vidro"]).dark textarea::placeholder, :root:is([data-tema="azul"], [data-tema="vidro"]).dark .input-field::placeholder { color: var(--tga-t5) !important; } :root:is([data-tema="azul"], [data-tema="vidro"]).dark select option, :root:is([data-tema="azul"], [data-tema="vidro"]).dark .section-filter option { background-color: var(--tga-card-solido) !important; color: var(--tga-t1) !important; } :root:is([data-tema="azul"], [data-tema="vidro"]).dark input:-webkit-autofill, :root:is([data-tema="azul"], [data-tema="vidro"]).dark input:-webkit-autofill:hover, :root:is([data-tema="azul"], [data-tema="vidro"]).dark input:-webkit-autofill:focus { -webkit-text-fill-color: var(--tga-t1) !important; -webkit-box-shadow: 0 0 0 1000px #0a1730 inset !important; caret-color: var(--tga-t1); } :root:is([data-tema="azul"], [data-tema="vidro"]).dark input[type="checkbox"], :root:is([data-tema="azul"], [data-tema="vidro"]).dark input[type="radio"], :root:is([data-tema="azul"], [data-tema="vidro"]).dark input[type="range"] { accent-color: var(--tga-a2); } /* ---------- camadas flutuantes com vidro (topo, menu inferior, painéis) ---------- */ :root:is([data-tema="azul"], [data-tema="vidro"]).dark .glass-nav, :root:is([data-tema="azul"], [data-tema="vidro"]).dark header.fixed, :root:is([data-tema="azul"], [data-tema="vidro"]).dark nav.fixed { background-color: var(--tga-vidro-flutuante) !important; border-bottom-color: var(--tga-borda) !important; -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%); box-shadow: 0 1px 0 rgba(143, 217, 255, 0.06), 0 12px 30px -20px rgba(0, 0, 0, 0.8) !important; } :root:is([data-tema="azul"], [data-tema="vidro"]).dark .glass-panel, :root:is([data-tema="azul"], [data-tema="vidro"]).dark .glass-container, :root:is([data-tema="azul"], [data-tema="vidro"]).dark .welcome-card, :root:is([data-tema="azul"], [data-tema="vidro"]).dark .modal-info-card { background: var(--tga-card-forte) !important; border: 1px solid var(--tga-borda2) !important; box-shadow: var(--tga-reflexo), 0 30px 60px -24px rgba(0, 8, 30, 0.85) !important; } :root:is([data-tema="azul"], [data-tema="vidro"]).dark #auth-guard-overlay, :root:is([data-tema="azul"], [data-tema="vidro"]).dark #loading-overlay { background: radial-gradient(circle at 50% 0%, rgba(47, 155, 255, 0.22), transparent 60%), linear-gradient(180deg, #07111f, #03060d) !important; } /* modais: fundo escurecido com um toque azul e desfoque leve */ :root:is([data-tema="azul"], [data-tema="vidro"]).dark .fixed.inset-0.bg-black\/50, :root:is([data-tema="azul"], [data-tema="vidro"]).dark .fixed.inset-0.bg-black\/60, :root:is([data-tema="azul"], [data-tema="vidro"]).dark .fixed.inset-0.bg-black\/70, :root:is([data-tema="azul"], [data-tema="vidro"]).dark .fixed.inset-0.bg-black\/80, :root:is([data-tema="azul"], [data-tema="vidro"]).dark .fixed.inset-0.bg-gray-900\/50, :root:is([data-tema="azul"], [data-tema="vidro"]).dark .fixed.inset-0.bg-gray-900\/60, :root:is([data-tema="azul"], [data-tema="vidro"]).dark .fixed.inset-0.bg-gray-900\/75 { background-color: rgba(2, 7, 18, 0.66) !important; } :root:is([data-tema="azul"], [data-tema="vidro"]).dark .fixed.inset-0 > .dark\:bg-dark-card, :root:is([data-tema="azul"], [data-tema="vidro"]).dark .fixed.inset-0 .modal-content.dark\:bg-dark-card, :root:is([data-tema="azul"], [data-tema="vidro"]).dark [role="dialog"] .dark\:bg-dark-card:first-child { background-color: var(--tga-card-forte) !important; border-color: var(--tga-borda2) !important; box-shadow: var(--tga-reflexo), 0 40px 80px -30px rgba(0, 8, 30, 0.9) !important; } /* ---------- menu inferior (js/footer-nav.js) ---------- */ :root:is([data-tema="azul"], [data-tema="vidro"]).dark .tg-nav { background: var(--tga-vidro-flutuante) !important; border-top-color: var(--tga-borda) !important; -webkit-backdrop-filter: blur(20px) saturate(170%); backdrop-filter: blur(20px) saturate(170%); box-shadow: 0 -1px 0 rgba(143, 217, 255, 0.06), 0 -14px 34px -18px rgba(0, 0, 0, 0.8) !important; } :root:is([data-tema="azul"], [data-tema="vidro"]).dark .tg-nav a, :root:is([data-tema="azul"], [data-tema="vidro"]).dark .tg-nav button.tg-more-btn, :root:is([data-tema="azul"], [data-tema="vidro"]).dark .tg-nav button.tg-bell-btn { color: var(--tga-t5) !important; } :root:is([data-tema="azul"], [data-tema="vidro"]).dark .tg-nav a:hover, :root:is([data-tema="azul"], [data-tema="vidro"]).dark .tg-nav a.is-active, :root:is([data-tema="azul"], [data-tema="vidro"]).dark .tg-nav button.tg-more-btn:hover { color: var(--tga-a1) !important; background: rgba(53, 194, 255, 0.12) !important; } :root:is([data-tema="azul"], [data-tema="vidro"]).dark .tg-more { background: var(--tga-card-forte) !important; border-top-color: var(--tga-borda2) !important; -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%); } :root:is([data-tema="azul"], [data-tema="vidro"]).dark .tg-more-handle { background: var(--tga-borda3) !important; } :root:is([data-tema="azul"], [data-tema="vidro"]).dark .tg-more-grid a { background: rgba(143, 200, 255, 0.05) !important; border-color: var(--tga-borda) !important; color: var(--tga-t4) !important; } :root:is([data-tema="azul"], [data-tema="vidro"]).dark .tg-more-grid a:hover, :root:is([data-tema="azul"], [data-tema="vidro"]).dark .tg-more-grid a.is-active { color: var(--tga-a1) !important; background: rgba(53, 194, 255, 0.13) !important; border-color: rgba(53, 194, 255, 0.38) !important; } :root:is([data-tema="azul"], [data-tema="vidro"]).dark .tg-socials a { border-color: var(--tga-borda) !important; } /* ---------- central de notificações (js/tg-notifs.js) ---------- */ :root:is([data-tema="azul"], [data-tema="vidro"]).dark .tgn-panel { background: var(--tga-card-forte) !important; border-left-color: var(--tga-borda2) !important; -webkit-backdrop-filter: blur(22px) saturate(160%); backdrop-filter: blur(22px) saturate(160%); color: var(--tga-t1) !important; } :root:is([data-tema="azul"], [data-tema="vidro"]).dark .tgn-item { background: rgba(20, 36, 64, 0.55) !important; border-color: var(--tga-borda) !important; } :root:is([data-tema="azul"], [data-tema="vidro"]).dark .tgn-item:hover { background: rgba(30, 52, 90, 0.6) !important; border-color: var(--tga-borda2) !important; } :root:is([data-tema="azul"], [data-tema="vidro"]).dark .tgn-item:not(.lido) { background: linear-gradient(90deg, rgba(53, 194, 255, 0.14), rgba(53, 194, 255, 0) 65%), rgba(20, 36, 64, 0.6) !important; border-color: rgba(53, 194, 255, 0.34) !important; } :root:is([data-tema="azul"], [data-tema="vidro"]).dark .tgn-chip { background: rgba(143, 200, 255, 0.05) !important; border-color: var(--tga-borda2) !important; color: var(--tga-t4) !important; } :root:is([data-tema="azul"], [data-tema="vidro"]).dark .tgn-chip.on { background: rgba(53, 194, 255, 0.16) !important; border-color: var(--tga-a1) !important; color: var(--tga-a-claro) !important; } :root:is([data-tema="azul"], [data-tema="vidro"]).dark .tgn-toast { background: var(--tga-card-forte) !important; border-color: var(--tga-borda2) !important; -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); } /* ---------- tabelas ---------- */ :root:is([data-tema="azul"], [data-tema="vidro"]).dark thead th { color: var(--tga-t4) !important; border-bottom-color: var(--tga-borda2) !important; } :root:is([data-tema="azul"], [data-tema="vidro"]).dark tbody tr { border-bottom-color: var(--tga-borda) !important; } :root:is([data-tema="azul"], [data-tema="vidro"]).dark tbody tr:hover { background-color: rgba(47, 155, 255, 0.05); } :root:is([data-tema="azul"], [data-tema="vidro"]).dark thead.dark\:bg-gray-800, :root:is([data-tema="azul"], [data-tema="vidro"]).dark thead.dark\:bg-gray-900, :root:is([data-tema="azul"], [data-tema="vidro"]).dark thead .dark\:bg-gray-800 { background-color: rgba(26, 44, 76, 0.55) !important; } :root:is([data-tema="azul"], [data-tema="vidro"]).dark .info-row { border-bottom-color: var(--tga-borda) !important; } /* ---------- componentes próprios das páginas ---------- */ :root:is([data-tema="azul"], [data-tema="vidro"]).dark .chip, :root:is([data-tema="azul"], [data-tema="vidro"]).dark .status-filter-btn, :root:is([data-tema="azul"], [data-tema="vidro"]).dark .fab-item, :root:is([data-tema="azul"], [data-tema="vidro"]).dark .w-tabs { background: var(--tga-card) !important; border-color: var(--tga-borda2) !important; color: var(--tga-t4) !important; } :root:is([data-tema="azul"], [data-tema="vidro"]).dark .fab-item-title { color: var(--tga-t1) !important; } :root:is([data-tema="azul"], [data-tema="vidro"]).dark .fab-item-subtitle { color: var(--tga-t4) !important; } :root:is([data-tema="azul"], [data-tema="vidro"]).dark .w-tab-btn { color: var(--tga-t4) !important; } :root:is([data-tema="azul"], [data-tema="vidro"]).dark .w-tab-btn:hover { background: var(--tga-hover2) !important; color: var(--tga-t1) !important; } :root:is([data-tema="azul"], [data-tema="vidro"]).dark .w-tab-btn.is-active, :root:is([data-tema="azul"], [data-tema="vidro"]).dark .tab-btn-active { color: #fff !important; } :root:is([data-tema="azul"], [data-tema="vidro"]).dark .w-tab-btn.is-active { background: linear-gradient(135deg, #2f9bff, #155fb0) !important; } :root:is([data-tema="azul"], [data-tema="vidro"]).dark .filter-btn-inactive, :root:is([data-tema="azul"], [data-tema="vidro"]).dark .tab-btn-inactive { color: var(--tga-t4) !important; } :root:is([data-tema="azul"], [data-tema="vidro"]).dark .dropzone { border-color: var(--tga-borda3) !important; } :root:is([data-tema="azul"], [data-tema="vidro"]).dark .settings-tab-btn { color: var(--tga-t4); } /* botões e filtros ativos: fundo azul com texto branco (a regra de texto do tema não pode apagar) */ :root:is([data-tema="azul"], [data-tema="vidro"]).dark .bg-brand-600, :root:is([data-tema="azul"], [data-tema="vidro"]).dark .bg-brand-500, :root:is([data-tema="azul"], [data-tema="vidro"]).dark .bg-blue-600, :root:is([data-tema="azul"], [data-tema="vidro"]).dark .filter-pill.active, :root:is([data-tema="azul"], [data-tema="vidro"]).dark .status-filter-btn.active, :root:is([data-tema="azul"], [data-tema="vidro"]).dark .tpl-chip.active { color: #fff !important; } :root:is([data-tema="azul"], [data-tema="vidro"]).dark .filter-pill.active, :root:is([data-tema="azul"], [data-tema="vidro"]).dark .status-filter-btn.active, :root:is([data-tema="azul"], [data-tema="vidro"]).dark .tpl-chip.active { background: linear-gradient(135deg, #2f9bff, #155fb0) !important; border-color: transparent !important; } /* seletores de estilo/modelo de documento (Configurações) */ :root:is([data-tema="azul"], [data-tema="vidro"]).dark .style-chip, :root:is([data-tema="azul"], [data-tema="vidro"]).dark .tpl-chip:not(.active) { background: var(--tga-card) !important; border-color: var(--tga-borda2) !important; color: var(--tga-t3) !important; } :root:is([data-tema="azul"], [data-tema="vidro"]).dark .style-chip.active { border-color: var(--tga-a1) !important; color: var(--tga-a-claro) !important; } /* botões brancos sem variante escura (ficavam como um bloco branco no meio do azul) */ :root:is([data-tema="azul"], [data-tema="vidro"]).dark button.bg-white:not([class*="dark:bg-"]) { background-color: var(--tga-elev) !important; color: var(--tga-t1) !important; border-color: var(--tga-borda2) !important; } /* botões invertidos (brancos no modo escuro, ex.: "Ver Termo") viram azul-claro */ :root:is([data-tema="azul"], [data-tema="vidro"]).dark .dark\:bg-white { background-color: #dcefff !important; background-image: linear-gradient(135deg, #eaf6ff, #bfe3ff) !important; color: #0b2447 !important; } /* ---------- gráficos (ApexCharts) ---------- */ :root:is([data-tema="azul"], [data-tema="vidro"]).dark .apexcharts-tooltip { background: var(--tga-card-forte) !important; border-color: var(--tga-borda2) !important; color: var(--tga-t1) !important; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); } :root:is([data-tema="azul"], [data-tema="vidro"]).dark .apexcharts-tooltip-title { background: rgba(4, 10, 22, 0.8) !important; border-bottom-color: var(--tga-borda) !important; } :root:is([data-tema="azul"], [data-tema="vidro"]).dark .apexcharts-gridline, :root:is([data-tema="azul"], [data-tema="vidro"]).dark .apexcharts-xaxis-tick { stroke: rgba(120, 170, 255, 0.1) !important; } :root:is([data-tema="azul"], [data-tema="vidro"]).dark .apexcharts-text, :root:is([data-tema="azul"], [data-tema="vidro"]).dark .apexcharts-legend-text { fill: var(--tga-t4) !important; color: var(--tga-t4) !important; } :root:is([data-tema="azul"], [data-tema="vidro"]).dark .apexcharts-menu { background: var(--tga-card-solido) !important; border-color: var(--tga-borda2) !important; } /* ---------- barras de rolagem ---------- */ :root:is([data-tema="azul"], [data-tema="vidro"]).dark ::-webkit-scrollbar-thumb { background: rgba(120, 170, 255, 0.24) !important; } :root:is([data-tema="azul"], [data-tema="vidro"]).dark ::-webkit-scrollbar-thumb:hover { background: rgba(120, 170, 255, 0.4) !important; } :root:is([data-tema="azul"], [data-tema="vidro"]).dark ::-webkit-scrollbar-track { background: transparent !important; } :root:is([data-tema="azul"], [data-tema="vidro"]).dark * { scrollbar-color: rgba(120, 170, 255, 0.28) transparent; } /* ---------- seleção de texto e foco de teclado ---------- */ :root:is([data-tema="azul"], [data-tema="vidro"]).dark ::selection { background: rgba(53, 194, 255, 0.35); color: #fff; } :root:is([data-tema="azul"], [data-tema="vidro"]).dark :focus-visible { outline-color: var(--tga-a1); } /* ---------- micro animação dos cartões clicáveis ---------- */ @media (hover: hover) { :root:is([data-tema="azul"], [data-tema="vidro"]).dark a.dark\:bg-dark-card:hover, :root:is([data-tema="azul"], [data-tema="vidro"]).dark button.dark\:bg-dark-card:hover, :root:is([data-tema="azul"], [data-tema="vidro"]).dark a.rounded-2xl.dark\:bg-dark-card:hover { border-color: rgba(53, 194, 255, 0.36) !important; box-shadow: var(--tga-reflexo), 0 18px 40px -20px rgba(47, 155, 255, 0.45) !important; } } /* telas pequenas: menos desfoque (economiza GPU em celular simples) */ @media (max-width: 640px) { :root:is([data-tema="azul"], [data-tema="vidro"]).dark .glass-nav, :root:is([data-tema="azul"], [data-tema="vidro"]).dark header.fixed, :root:is([data-tema="azul"], [data-tema="vidro"]).dark nav.fixed, :root:is([data-tema="azul"], [data-tema="vidro"]).dark .tg-nav { -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%); } } @media (prefers-reduced-motion: reduce) { :root.tg-tema-trocando body, :root.tg-tema-trocando body * { transition: none !important; } } /* ===================================================================== PALETAS DO MOTOR ESCURO ===================================================================== */ /* ---------- Azul escuro: degradê azul-noite -> azul-royal com aurora ciano ---------- */ :root[data-tema="azul"].dark body::before { background: radial-gradient(900px 620px at 12% -12%, rgba(53, 194, 255, 0.30), transparent 60%), radial-gradient(1000px 720px at 105% 0%, rgba(59, 108, 255, 0.28), transparent 62%), radial-gradient(1100px 760px at 50% 115%, rgba(21, 95, 176, 0.45), transparent 66%), linear-gradient(165deg, #0b2250 0%, #071733 42%, #040b1a 100%); } :root[data-tema="azul"].dark body::after { content: ""; position: fixed; inset: -20%; z-index: -1; pointer-events: none; will-change: transform; background: radial-gradient(30% 26% at 30% 30%, rgba(53, 194, 255, 0.16), transparent 70%), radial-gradient(28% 24% at 70% 60%, rgba(47, 120, 255, 0.16), transparent 70%), radial-gradient(24% 20% at 50% 85%, rgba(143, 217, 255, 0.08), transparent 70%); animation: tgaAurora 18s ease-in-out infinite alternate; } @keyframes tgaAurora { 0% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); } 50% { transform: translate3d(4%, -3%, 0) rotate(8deg) scale(1.08); } 100% { transform: translate3d(-5%, 4%, 0) rotate(-6deg) scale(1.02); } } /* cartões com brilho azul em diagonal (o degradê do resumo) */ :root[data-tema="azul"].dark .dark\:bg-dark-card.rounded-2xl, :root[data-tema="azul"].dark .dark\:bg-dark-card.rounded-3xl, :root[data-tema="azul"].dark .dark\:bg-dark-card.rounded-xl { background-image: linear-gradient(145deg, rgba(47, 155, 255, 0.16) 0%, rgba(21, 95, 176, 0.05) 45%, rgba(3, 8, 20, 0) 70%) !important; border-color: rgba(120, 180, 255, 0.2) !important; } :root[data-tema="azul"].dark .glass-nav, :root[data-tema="azul"].dark header.fixed, :root[data-tema="azul"].dark nav.fixed { background-image: linear-gradient(90deg, rgba(21, 95, 176, 0.25), rgba(7, 17, 35, 0) 50%, rgba(53, 194, 255, 0.12)) !important; } :root[data-tema="azul"].dark .bg-brand-600, :root[data-tema="azul"].dark .bg-brand-500, :root[data-tema="azul"].dark .bg-blue-600 { background-image: linear-gradient(120deg, #35c2ff 0%, #2f9bff 35%, #1c74d6 70%, #155fb0 100%) !important; } /* ---------- Liquid Glass escuro: grafite translúcido sobre manchas de cor (iOS 26 escuro) ---------- */ :root[data-tema="vidro"].dark { --tga-fundo: #06070b; --tga-fundo2: #12141c; --tga-card: rgba(30, 32, 42, 0.6); --tga-card-solido: #15171f; --tga-card-forte: rgba(26, 28, 37, 0.92); --tga-elev: rgba(66, 70, 88, 0.42); --tga-elev2: rgba(88, 94, 114, 0.48); --tga-afundado: rgba(0, 0, 0, 0.32); --tga-campo: rgba(18, 20, 28, 0.66); --tga-borda: rgba(255, 255, 255, 0.1); --tga-borda2: rgba(255, 255, 255, 0.16); --tga-borda3: rgba(255, 255, 255, 0.26); --tga-reflexo: inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 -1px 0 rgba(255, 255, 255, 0.03); --tga-sombra: 0 22px 48px -22px rgba(0, 0, 0, 0.85); --tga-t1: #f6f7fb; --tga-t2: #e3e6ee; --tga-t3: #c4c9d5; --tga-t4: #a5abba; --tga-t5: #888f9f; --tga-t6: #6a7182; --tga-a1: #5ac8fa; --tga-a2: #0a84ff; --tga-a3: #0060df; --tga-a-claro: #9bdcff; --tga-hover: rgba(255, 255, 255, 0.06); --tga-hover2: rgba(255, 255, 255, 0.1); --tga-vidro-flutuante: rgba(24, 26, 34, 0.58); } :root[data-tema="vidro"].dark body::before { inset: -10%; will-change: transform; background: radial-gradient(36% 40% at 18% 18%, rgba(10, 132, 255, 0.34), transparent 70%), radial-gradient(32% 38% at 86% 16%, rgba(175, 82, 222, 0.28), transparent 70%), radial-gradient(40% 42% at 80% 84%, rgba(48, 209, 188, 0.22), transparent 70%), radial-gradient(34% 38% at 12% 88%, rgba(255, 55, 135, 0.18), transparent 70%), linear-gradient(160deg, #0c0e16 0%, #0a0a12 50%, #070b10 100%); animation: tgvDeriva 16s ease-in-out infinite alternate; } :root[data-tema="vidro"].dark .dark\:bg-dark-card.rounded-2xl, :root[data-tema="vidro"].dark .dark\:bg-dark-card.rounded-3xl, :root[data-tema="vidro"].dark .dark\:bg-dark-card.rounded-xl { background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0.02) 60%) !important; border-color: rgba(255, 255, 255, 0.12) !important; } :root[data-tema="vidro"].dark .bg-brand-600, :root[data-tema="vidro"].dark .bg-brand-500, :root[data-tema="vidro"].dark .bg-blue-600 { background-color: #0a84ff !important; background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 55%), linear-gradient(135deg, #3aa0ff 0%, #0a84ff 50%, #0060df 100%) !important; } :root[data-tema="vidro"].dark .filter-pill.active, :root[data-tema="vidro"].dark .status-filter-btn.active { background: linear-gradient(135deg, #3aa0ff, #0060df) !important; color: #fff !important; } :root[data-tema="vidro"].dark .tg-nav { left: 10px !important; right: 10px !important; bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important; border-radius: 28px !important; border: 1px solid rgba(255, 255, 255, 0.14) !important; background: rgba(28, 30, 40, 0.55) !important; -webkit-backdrop-filter: blur(26px) saturate(180%); backdrop-filter: blur(26px) saturate(180%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 18px 40px -14px rgba(0, 0, 0, 0.8) !important; padding-bottom: 0 !important; } :root[data-tema="vidro"].dark .tg-nav a.is-active { background: rgba(255, 255, 255, 0.1) !important; } :root[data-tema="vidro"].dark .tg-nav a.is-active::before { display: none !important; } @media (min-width: 960px) { :root[data-tema="vidro"].dark .tg-nav { left: 50% !important; right: auto !important; width: min(920px, calc(100% - 20px)); transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { :root[data-tema="azul"].dark body::after, :root[data-tema="vidro"].dark body::before { animation: none; } }