/* Tema "Liquid Glass" do TecGestor (inspirado no iOS 26 / visionOS). Ativo quando (js/tg-tema.js). É um tema CLARO: fundo com manchas de cor suaves (como um papel de parede do iPhone) e, por cima, vidro branco translúcido com borda que brilha, reflexo no topo e sombra macia. Como funciona: roda sempre sobre o modo claro, então repinta as classes do modo claro que as páginas já usam (bg-white, bg-gray-50, border-gray-200...) e os estilos próprios de cada página. Fica tudo restrito a [data-tema="vidro"]. Desempenho: o desfoque (backdrop-filter) fica só nas camadas que flutuam SOBRE conteúdo (barra do topo, menu inferior, modais, menus e dicas), que é onde o efeito aparece de verdade. Os cartões usam vidro por cor + reflexo: sobre o fundo suave o resultado é o mesmo e listas longas continuam leves. As manchas do fundo se movem só com transform (roda na GPU, sem repintar a página). */ :root:is([data-tema="vidro"], [data-tema="azul"]):not(.dark) { --tgv-fundo: #eef3fb; --tgv-vidro: linear-gradient(135deg, rgba(255, 255, 255, 0.78) 0%, rgba(255, 255, 255, 0.5) 100%); --tgv-vidro-cor: rgba(255, 255, 255, 0.62); --tgv-vidro-forte: rgba(255, 255, 255, 0.82); --tgv-vidro-leve: rgba(255, 255, 255, 0.42); --tgv-vidro-campo: rgba(255, 255, 255, 0.58); --tgv-borda: rgba(255, 255, 255, 0.8); --tgv-borda-fina: rgba(40, 70, 130, 0.1); --tgv-borda-media: rgba(40, 70, 130, 0.16); --tgv-reflexo: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -1px 0 rgba(255, 255, 255, 0.3); --tgv-sombra: 0 10px 34px -12px rgba(30, 60, 120, 0.22), 0 2px 6px -2px rgba(30, 60, 120, 0.08); --tgv-sombra-alta: 0 30px 70px -24px rgba(20, 45, 100, 0.35), 0 8px 20px -10px rgba(20, 45, 100, 0.15); --tgv-t1: #0b1526; --tgv-t2: #1c2a40; --tgv-t3: #334155; --tgv-t4: #4a5a72; --tgv-t5: #5b6b83; --tgv-a1: #0a84ff; --tgv-a2: #0071e3; --tgv-hover: rgba(255, 255, 255, 0.72); color-scheme: light; background-color: var(--tgv-fundo) !important; } /* ---------- fundo: "papel de parede" com manchas de cor ---------- */ :root:is([data-tema="vidro"], [data-tema="azul"]):not(.dark) body { background-color: transparent !important; color: var(--tgv-t2); } :root:is([data-tema="vidro"], [data-tema="azul"]):not(.dark) body::before, :root:is([data-tema="vidro"], [data-tema="azul"]):not(.dark) body::after { content: ""; position: fixed; z-index: -1; pointer-events: none; will-change: transform; } :root:is([data-tema="vidro"], [data-tema="azul"]):not(.dark) body::before { inset: -10%; background: radial-gradient(38% 42% at 18% 20%, rgba(125, 196, 255, 0.75), transparent 70%), radial-gradient(34% 40% at 84% 14%, rgba(196, 181, 253, 0.65), transparent 70%), radial-gradient(40% 44% at 78% 82%, rgba(153, 246, 228, 0.55), transparent 70%), radial-gradient(36% 40% at 14% 86%, rgba(251, 207, 232, 0.6), transparent 70%), linear-gradient(160deg, #eaf2ff 0%, #f3f0ff 50%, #ecfbf7 100%); animation: tgvDeriva 16s ease-in-out infinite alternate; } :root:is([data-tema="vidro"], [data-tema="azul"]):not(.dark) body::after { inset: 0; background: radial-gradient(28% 30% at 60% 45%, rgba(255, 255, 255, 0.55), transparent 70%), radial-gradient(22% 26% at 35% 60%, rgba(147, 197, 253, 0.35), transparent 70%); animation: tgvDeriva2 11s ease-in-out infinite alternate; } /* manchas mais vivas: três pontos de passagem, com giro leve (só transform, roda na GPU) */ @keyframes tgvDeriva { 0% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); } 33% { transform: translate3d(-4%, 3%, 0) rotate(4deg) scale(1.08); } 66% { transform: translate3d(3%, -2%, 0) rotate(-3deg) scale(1.04); } 100% { transform: translate3d(-2%, -4%, 0) rotate(2deg) scale(1.1); } } @keyframes tgvDeriva2 { 0% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(8%, -5%, 0) scale(1.15); } 100% { transform: translate3d(-6%, 4%, 0) scale(0.95); } } :root:is([data-tema="vidro"], [data-tema="azul"]):not(.dark) body.bg-gray-50, :root:is([data-tema="vidro"], [data-tema="azul"]):not(.dark) body.bg-white, :root:is([data-tema="vidro"], [data-tema="azul"]):not(.dark) body.bg-gray-100, :root:is([data-tema="vidro"], [data-tema="azul"]):not(.dark) main.bg-gray-50 { background-color: transparent !important; } :root:is([data-tema="vidro"], [data-tema="azul"]):not(.dark) .bg-pattern { background-image: none !important; } /* troca suave entre temas */ /* (a transição da troca de tema fica em tema-azul.css, vale para todos) */ /* ---------- cartões de vidro ---------- */ :root:is([data-tema="vidro"], [data-tema="azul"]):not(.dark) .bg-white { background-color: var(--tgv-vidro-cor) !important; border-color: var(--tgv-borda) !important; } :root:is([data-tema="vidro"], [data-tema="azul"]):not(.dark) .bg-white.rounded-xl, :root:is([data-tema="vidro"], [data-tema="azul"]):not(.dark) .bg-white.rounded-2xl, :root:is([data-tema="vidro"], [data-tema="azul"]):not(.dark) .bg-white.rounded-3xl { background-color: transparent !important; background-image: var(--tgv-vidro) !important; box-shadow: var(--tgv-reflexo), var(--tgv-sombra) !important; } :root:is([data-tema="vidro"], [data-tema="azul"]):not(.dark) .bg-white\/90, :root:is([data-tema="vidro"], [data-tema="azul"]):not(.dark) .bg-white\/95 { background-color: var(--tgv-vidro-forte) !important; } :root:is([data-tema="vidro"], [data-tema="azul"]):not(.dark) .bg-gray-50, :root:is([data-tema="vidro"], [data-tema="azul"]):not(.dark) .bg-slate-50, :root:is([data-tema="vidro"], [data-tema="azul"]):not(.dark) .bg-gray-50\/50, :root:is([data-tema="vidro"], [data-tema="azul"]):not(.dark) .bg-gray-50\/60 { background-color: var(--tgv-vidro-leve) !important; } :root:is([data-tema="vidro"], [data-tema="azul"]):not(.dark) .bg-gray-100 { background-color: rgba(255, 255, 255, 0.36) !important; } :root:is([data-tema="vidro"], [data-tema="azul"]):not(.dark) .bg-gray-200 { background-color: rgba(214, 225, 243, 0.55) !important; } :root:is([data-tema="vidro"], [data-tema="azul"]):not(.dark) .hover\:bg-gray-50:hover, :root:is([data-tema="vidro"], [data-tema="azul"]):not(.dark) .hover\:bg-gray-100:hover, :root:is([data-tema="vidro"], [data-tema="azul"]):not(.dark) .hover\:bg-gray-50\/50:hover { background-color: var(--tgv-hover) !important; } :root:is([data-tema="vidro"], [data-tema="azul"]):not(.dark) .hover\:bg-gray-200:hover { background-color: rgba(214, 225, 243, 0.75) !important; } /* ---------- bordas ---------- */ :root:is([data-tema="vidro"], [data-tema="azul"]):not(.dark) .border-gray-100, :root:is([data-tema="vidro"], [data-tema="azul"]):not(.dark) .border-gray-50, :root:is([data-tema="vidro"], [data-tema="azul"]):not(.dark) .border-slate-100 { border-color: var(--tgv-borda) !important; } :root:is([data-tema="vidro"], [data-tema="azul"]):not(.dark) .border-gray-200, :root:is([data-tema="vidro"], [data-tema="azul"]):not(.dark) .border-gray-200\/60, :root:is([data-tema="vidro"], [data-tema="azul"]):not(.dark) .border-gray-200\/80 { border-color: var(--tgv-borda-fina) !important; } :root:is([data-tema="vidro"], [data-tema="azul"]):not(.dark) .border-gray-300 { border-color: var(--tgv-borda-media) !important; } :root:is([data-tema="vidro"], [data-tema="azul"]):not(.dark) .divide-gray-100 > :not(:last-child), :root:is([data-tema="vidro"], [data-tema="azul"]):not(.dark) .divide-gray-200 > :not(:last-child) { border-color: var(--tgv-borda-fina) !important; } :root:is([data-tema="vidro"], [data-tema="azul"]):not(.dark) .ring-black\/5 { --tw-ring-color: rgba(40, 70, 130, 0.08) !important; } /* ---------- texto: um pouco mais escuro, para não perder contraste sobre o vidro ---------- */ :root:is([data-tema="vidro"], [data-tema="azul"]):not(.dark) .text-gray-900 { color: var(--tgv-t1) !important; } :root:is([data-tema="vidro"], [data-tema="azul"]):not(.dark) .text-gray-800 { color: var(--tgv-t2) !important; } :root:is([data-tema="vidro"], [data-tema="azul"]):not(.dark) .text-gray-700 { color: var(--tgv-t3) !important; } :root:is([data-tema="vidro"], [data-tema="azul"]):not(.dark) .text-gray-600 { color: var(--tgv-t4) !important; } :root:is([data-tema="vidro"], [data-tema="azul"]):not(.dark) .text-gray-500 { color: var(--tgv-t5) !important; } :root:is([data-tema="vidro"], [data-tema="azul"]):not(.dark) .text-gray-400 { color: #6b7a90 !important; } :root:is([data-tema="vidro"], [data-tema="azul"]):not(.dark) .text-brand-500, :root:is([data-tema="vidro"], [data-tema="azul"]):not(.dark) .text-brand-600 { color: var(--tgv-a2) !important; } /* ---------- botões principais: vidro azul "tintado" do iOS ---------- */ :root:is([data-tema="vidro"], [data-tema="azul"]):not(.dark) .bg-brand-600, :root:is([data-tema="vidro"], [data-tema="azul"]):not(.dark) .bg-brand-500, :root:is([data-tema="vidro"], [data-tema="azul"]):not(.dark) .bg-blue-600 { background-color: var(--tgv-a1) !important; background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0) 55%), linear-gradient(135deg, #2997ff 0%, #0a84ff 50%, #0066d6 100%) !important; color: #fff !important; } :root:is([data-tema="vidro"], [data-tema="azul"]):not(.dark) button.bg-brand-600, :root:is([data-tema="vidro"], [data-tema="azul"]):not(.dark) a.bg-brand-600, :root:is([data-tema="vidro"], [data-tema="azul"]):not(.dark) button.bg-brand-500, :root:is([data-tema="vidro"], [data-tema="azul"]):not(.dark) a.bg-brand-500, :root:is([data-tema="vidro"], [data-tema="azul"]):not(.dark) button.bg-blue-600 { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 10px 24px -10px rgba(10, 132, 255, 0.65) !important; border-color: rgba(255, 255, 255, 0.45) !important; } :root:is([data-tema="vidro"], [data-tema="azul"]):not(.dark) .hover\:bg-brand-700:hover, :root:is([data-tema="vidro"], [data-tema="azul"]):not(.dark) .hover\:bg-brand-600:hover, :root:is([data-tema="vidro"], [data-tema="azul"]):not(.dark) .hover\:bg-blue-700:hover { background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.34) 0%, rgba(255, 255, 255, 0) 55%), linear-gradient(135deg, #3ba0ff 0%, #1a8cff 50%, #0a72e6 100%) !important; } /* botões e filtros ativos: texto sempre branco sobre o azul */ :root:is([data-tema="vidro"], [data-tema="azul"]):not(.dark) .filter-pill.active, :root:is([data-tema="vidro"], [data-tema="azul"]):not(.dark) .status-filter-btn.active, :root:is([data-tema="vidro"], [data-tema="azul"]):not(.dark) .tpl-chip.active { color: #fff !important; background: linear-gradient(135deg, #2997ff, #0066d6) !important; border-color: transparent !important; } /* ---------- campos ---------- */ :root:is([data-tema="vidro"], [data-tema="azul"]):not(.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="vidro"], [data-tema="azul"]):not(.dark) select:not(.bg-transparent), :root:is([data-tema="vidro"], [data-tema="azul"]):not(.dark) textarea:not(.bg-transparent), :root:is([data-tema="vidro"], [data-tema="azul"]):not(.dark) .input-field, :root:is([data-tema="vidro"], [data-tema="azul"]):not(.dark) .field, :root:is([data-tema="vidro"], [data-tema="azul"]):not(.dark) .glass-input { background-color: var(--tgv-vidro-campo) !important; border-color: rgba(255, 255, 255, 0.85) !important; color: var(--tgv-t1) !important; box-shadow: inset 0 1px 2px rgba(30, 60, 120, 0.08) !important; } :root:is([data-tema="vidro"], [data-tema="azul"]):not(.dark) input:focus:not([type="checkbox"]):not([type="radio"]):not([type="range"]), :root:is([data-tema="vidro"], [data-tema="azul"]):not(.dark) select:focus, :root:is([data-tema="vidro"], [data-tema="azul"]):not(.dark) textarea:focus, :root:is([data-tema="vidro"], [data-tema="azul"]):not(.dark) .input-field:focus, :root:is([data-tema="vidro"], [data-tema="azul"]):not(.dark) .glass-input:focus { background-color: rgba(255, 255, 255, 0.85) !important; border-color: var(--tgv-a1) !important; box-shadow: 0 0 0 4px rgba(10, 132, 255, 0.18), inset 0 1px 2px rgba(30, 60, 120, 0.06) !important; outline: none; } :root:is([data-tema="vidro"], [data-tema="azul"]):not(.dark) input::placeholder, :root:is([data-tema="vidro"], [data-tema="azul"]):not(.dark) textarea::placeholder { color: #8391a7 !important; } :root:is([data-tema="vidro"], [data-tema="azul"]):not(.dark) select option { background-color: #f5f8ff !important; color: var(--tgv-t1) !important; } :root:is([data-tema="vidro"], [data-tema="azul"]):not(.dark) input[type="checkbox"], :root:is([data-tema="vidro"], [data-tema="azul"]):not(.dark) input[type="radio"], :root:is([data-tema="vidro"], [data-tema="azul"]):not(.dark) input[type="range"] { accent-color: var(--tgv-a1); } /* ---------- camadas flutuantes (onde o desfoque aparece de verdade) ---------- */ :root:is([data-tema="vidro"], [data-tema="azul"]):not(.dark) .glass-nav, :root:is([data-tema="vidro"], [data-tema="azul"]):not(.dark) header.fixed, :root:is([data-tema="vidro"], [data-tema="azul"]):not(.dark) nav.fixed { background-color: rgba(255, 255, 255, 0.5) !important; border-bottom-color: rgba(255, 255, 255, 0.7) !important; -webkit-backdrop-filter: blur(24px) saturate(190%); backdrop-filter: blur(24px) saturate(190%); box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.6), 0 10px 30px -18px rgba(30, 60, 120, 0.35) !important; } :root:is([data-tema="vidro"], [data-tema="azul"]):not(.dark) .glass-panel, :root:is([data-tema="vidro"], [data-tema="azul"]):not(.dark) .glass-container, :root:is([data-tema="vidro"], [data-tema="azul"]):not(.dark) .welcome-card, :root:is([data-tema="vidro"], [data-tema="azul"]):not(.dark) .modal-info-card { background: rgba(255, 255, 255, 0.7) !important; border: 1px solid rgba(255, 255, 255, 0.85) !important; -webkit-backdrop-filter: blur(28px) saturate(180%); backdrop-filter: blur(28px) saturate(180%); box-shadow: var(--tgv-reflexo), var(--tgv-sombra-alta) !important; } :root:is([data-tema="vidro"], [data-tema="azul"]):not(.dark) #auth-guard-overlay, :root:is([data-tema="vidro"], [data-tema="azul"]):not(.dark) #loading-overlay { background: linear-gradient(160deg, #eaf2ff 0%, #f3f0ff 50%, #ecfbf7 100%) !important; } /* modais: o fundo embaça (como o iOS) e o cartão vira vidro mais denso */ :root:is([data-tema="vidro"], [data-tema="azul"]):not(.dark) .fixed.inset-0.bg-black\/50, :root:is([data-tema="vidro"], [data-tema="azul"]):not(.dark) .fixed.inset-0.bg-black\/60, :root:is([data-tema="vidro"], [data-tema="azul"]):not(.dark) .fixed.inset-0.bg-black\/70, :root:is([data-tema="vidro"], [data-tema="azul"]):not(.dark) .fixed.inset-0.bg-black\/80, :root:is([data-tema="vidro"], [data-tema="azul"]):not(.dark) .fixed.inset-0.bg-gray-900\/50, :root:is([data-tema="vidro"], [data-tema="azul"]):not(.dark) .fixed.inset-0.bg-gray-900\/60, :root:is([data-tema="vidro"], [data-tema="azul"]):not(.dark) .fixed.inset-0.bg-gray-900\/70, :root:is([data-tema="vidro"], [data-tema="azul"]):not(.dark) .fixed.inset-0.bg-gray-900\/75, :root:is([data-tema="vidro"], [data-tema="azul"]):not(.dark) .fixed.inset-0.bg-gray-900\/80 { background-color: rgba(20, 40, 80, 0.22) !important; -webkit-backdrop-filter: blur(10px) saturate(140%); backdrop-filter: blur(10px) saturate(140%); } :root:is([data-tema="vidro"], [data-tema="azul"]):not(.dark) .fixed.inset-0 > .bg-white, :root:is([data-tema="vidro"], [data-tema="azul"]):not(.dark) .fixed.inset-0 .modal-content.bg-white, :root:is([data-tema="vidro"], [data-tema="azul"]):not(.dark) [role="dialog"] .bg-white:first-child { background-color: rgba(255, 255, 255, 0.84) !important; background-image: none !important; border: 1px solid rgba(255, 255, 255, 0.9) !important; box-shadow: var(--tgv-reflexo), var(--tgv-sombra-alta) !important; } /* ---------- menu inferior: cápsula de vidro flutuante (barra do iOS 26) ---------- */ :root:is([data-tema="vidro"], [data-tema="azul"]):not(.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.75) !important; background: rgba(255, 255, 255, 0.52) !important; -webkit-backdrop-filter: blur(26px) saturate(200%); backdrop-filter: blur(26px) saturate(200%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 16px 40px -14px rgba(20, 45, 100, 0.35) !important; padding-bottom: 0 !important; } :root:is([data-tema="vidro"], [data-tema="azul"]):not(.dark) .tg-nav a, :root:is([data-tema="vidro"], [data-tema="azul"]):not(.dark) .tg-nav button.tg-more-btn, :root:is([data-tema="vidro"], [data-tema="azul"]):not(.dark) .tg-nav button.tg-bell-btn { color: var(--tgv-t4) !important; } :root:is([data-tema="vidro"], [data-tema="azul"]):not(.dark) .tg-nav a:hover, :root:is([data-tema="vidro"], [data-tema="azul"]):not(.dark) .tg-nav a.is-active, :root:is([data-tema="vidro"], [data-tema="azul"]):not(.dark) .tg-nav button.tg-more-btn:hover { color: var(--tgv-a1) !important; background: rgba(255, 255, 255, 0.75) !important; box-shadow: inset 0 1px 0 #fff, 0 4px 12px -6px rgba(10, 132, 255, 0.5); } :root:is([data-tema="vidro"], [data-tema="azul"]):not(.dark) .tg-more { background: rgba(255, 255, 255, 0.72) !important; border-top: 1px solid rgba(255, 255, 255, 0.9) !important; border-radius: 28px 28px 0 0 !important; -webkit-backdrop-filter: blur(30px) saturate(190%); backdrop-filter: blur(30px) saturate(190%); box-shadow: 0 -20px 50px -20px rgba(20, 45, 100, 0.35) !important; } :root:is([data-tema="vidro"], [data-tema="azul"]):not(.dark) .tg-more-grid a { background: rgba(255, 255, 255, 0.55) !important; border-color: rgba(255, 255, 255, 0.85) !important; color: var(--tgv-t3) !important; } :root:is([data-tema="vidro"], [data-tema="azul"]):not(.dark) .tg-more-grid a:hover, :root:is([data-tema="vidro"], [data-tema="azul"]):not(.dark) .tg-more-grid a.is-active { color: var(--tgv-a1) !important; background: rgba(255, 255, 255, 0.85) !important; } /* sem o tracinho azul acima do item ativo (não combina com a cápsula) */ :root:is([data-tema="vidro"], [data-tema="azul"]):not(.dark) .tg-nav a.is-active::before { display: none !important; } /* no computador a cápsula fica centralizada, na largura do conteúdo */ @media (min-width: 960px) { :root:is([data-tema="vidro"], [data-tema="azul"]):not(.dark) .tg-nav { left: 50% !important; right: auto !important; width: min(920px, calc(100% - 20px)); transform: translateX(-50%); } } /* ---------- notificações ---------- */ :root:is([data-tema="vidro"], [data-tema="azul"]):not(.dark) .tgn-panel { background: rgba(255, 255, 255, 0.72) !important; -webkit-backdrop-filter: blur(30px) saturate(190%); backdrop-filter: blur(30px) saturate(190%); border-left: 1px solid rgba(255, 255, 255, 0.9) !important; } :root:is([data-tema="vidro"], [data-tema="azul"]):not(.dark) .tgn-item { background: rgba(255, 255, 255, 0.6) !important; border-color: rgba(255, 255, 255, 0.9) !important; box-shadow: var(--tgv-reflexo), 0 4px 14px -8px rgba(30, 60, 120, 0.25) !important; } :root:is([data-tema="vidro"], [data-tema="azul"]):not(.dark) .tgn-item:hover { background: rgba(255, 255, 255, 0.85) !important; } :root:is([data-tema="vidro"], [data-tema="azul"]):not(.dark) .tgn-item:not(.lido) { background: linear-gradient(90deg, rgba(10, 132, 255, 0.12), rgba(255, 255, 255, 0.6) 65%) !important; border-color: rgba(10, 132, 255, 0.3) !important; } :root:is([data-tema="vidro"], [data-tema="azul"]):not(.dark) .tgn-toast { background: rgba(255, 255, 255, 0.8) !important; -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); } /* ---------- componentes próprios das páginas ---------- */ :root:is([data-tema="vidro"], [data-tema="azul"]):not(.dark) .chip, :root:is([data-tema="vidro"], [data-tema="azul"]):not(.dark) .status-filter-btn:not(.active), :root:is([data-tema="vidro"], [data-tema="azul"]):not(.dark) .tpl-chip:not(.active), :root:is([data-tema="vidro"], [data-tema="azul"]):not(.dark) .style-chip, :root:is([data-tema="vidro"], [data-tema="azul"]):not(.dark) .w-tabs { background: rgba(255, 255, 255, 0.55) !important; border-color: rgba(255, 255, 255, 0.85) !important; } :root:is([data-tema="vidro"], [data-tema="azul"]):not(.dark) .w-tab-btn.is-active { background: linear-gradient(135deg, #2997ff, #0066d6) !important; color: #fff !important; } :root:is([data-tema="vidro"], [data-tema="azul"]):not(.dark) thead th { border-bottom-color: var(--tgv-borda-media) !important; } :root:is([data-tema="vidro"], [data-tema="azul"]):not(.dark) tbody tr { border-bottom-color: var(--tgv-borda-fina) !important; } :root:is([data-tema="vidro"], [data-tema="azul"]):not(.dark) tbody tr:hover { background-color: rgba(255, 255, 255, 0.45); } /* ---------- gráficos ---------- */ :root:is([data-tema="vidro"], [data-tema="azul"]):not(.dark) .apexcharts-tooltip { background: rgba(255, 255, 255, 0.82) !important; border-color: rgba(255, 255, 255, 0.95) !important; -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: var(--tgv-sombra) !important; } :root:is([data-tema="vidro"], [data-tema="azul"]):not(.dark) .apexcharts-gridline { stroke: rgba(40, 70, 130, 0.1) !important; } /* ---------- detalhes ---------- */ :root:is([data-tema="vidro"], [data-tema="azul"]):not(.dark) ::-webkit-scrollbar-thumb { background: rgba(40, 70, 130, 0.22) !important; border-radius: 9px; } :root:is([data-tema="vidro"], [data-tema="azul"]):not(.dark) ::-webkit-scrollbar-track { background: transparent !important; } :root:is([data-tema="vidro"], [data-tema="azul"]):not(.dark) * { scrollbar-color: rgba(40, 70, 130, 0.25) transparent; } :root:is([data-tema="vidro"], [data-tema="azul"]):not(.dark) ::selection { background: rgba(10, 132, 255, 0.25); } @media (hover: hover) { :root:is([data-tema="vidro"], [data-tema="azul"]):not(.dark) a.bg-white.rounded-2xl:hover, :root:is([data-tema="vidro"], [data-tema="azul"]):not(.dark) button.bg-white.rounded-2xl:hover, :root:is([data-tema="vidro"], [data-tema="azul"]):not(.dark) a.bg-white.rounded-xl:hover { box-shadow: var(--tgv-reflexo), 0 16px 40px -14px rgba(10, 132, 255, 0.3) !important; border-color: rgba(255, 255, 255, 1) !important; } } @media (max-width: 640px) { :root:is([data-tema="vidro"], [data-tema="azul"]):not(.dark) .glass-nav, :root:is([data-tema="vidro"], [data-tema="azul"]):not(.dark) header.fixed, :root:is([data-tema="vidro"], [data-tema="azul"]):not(.dark) nav.fixed { -webkit-backdrop-filter: blur(18px) saturate(180%); backdrop-filter: blur(18px) saturate(180%); } } @media (prefers-reduced-motion: reduce) { :root:is([data-tema="vidro"], [data-tema="azul"]):not(.dark) body::before, :root:is([data-tema="vidro"], [data-tema="azul"]):not(.dark) body::after { animation: none; } } /* Cobranças: aba e filtro ativos com azul mais fundo (o #0ea5e9 com texto branco tinha pouco contraste) */ :root:is([data-tema="vidro"], [data-tema="azul"]) .tab-btn-active, :root:is([data-tema="vidro"], [data-tema="azul"]) .filter-btn-active { background: linear-gradient(135deg, #1a8cff 0%, #0a6bd6 55%, #0b4fa8 100%) !important; color: #fff !important; } /* Análise: rótulos e botões das seções */ :root:is([data-tema="vidro"], [data-tema="azul"]):not(.dark) .section-head-sub, :root:is([data-tema="vidro"], [data-tema="azul"]):not(.dark) .section-hint { color: var(--tgv-t5) !important; } :root:is([data-tema="vidro"], [data-tema="azul"]):not(.dark) .section-head-link { background: rgba(255, 255, 255, 0.6) !important; border: 1px solid rgba(255, 255, 255, 0.9); box-shadow: var(--tgv-reflexo); color: var(--tgv-t3) !important; } :root:is([data-tema="vidro"], [data-tema="azul"]):not(.dark) .section-head-link:hover { background: rgba(255, 255, 255, 0.85) !important; color: var(--tgv-a2) !important; } /* ===================================================================== Azul claro: degradê azul-céu com vidro branco-azulado ===================================================================== */ :root[data-tema="azul"]:not(.dark) { --tgv-fundo: #d9ecff; --tgv-vidro: linear-gradient(135deg, rgba(255, 255, 255, 0.82) 0%, rgba(222, 239, 255, 0.55) 100%); --tgv-vidro-cor: rgba(245, 250, 255, 0.66); --tgv-vidro-leve: rgba(235, 245, 255, 0.5); --tgv-vidro-campo: rgba(255, 255, 255, 0.66); --tgv-borda-fina: rgba(21, 95, 176, 0.12); --tgv-borda-media: rgba(21, 95, 176, 0.2); --tgv-sombra: 0 12px 34px -12px rgba(21, 95, 176, 0.3), 0 2px 6px -2px rgba(21, 95, 176, 0.1); --tgv-t1: #061a36; --tgv-t2: #0d2a4e; --tgv-t3: #1f4069; --tgv-t4: #33557f; --tgv-t5: #466690; --tgv-a1: #1a8cff; --tgv-a2: #0a6bd6; } :root[data-tema="azul"]:not(.dark) body::before { background: radial-gradient(40% 44% at 16% 16%, rgba(53, 194, 255, 0.55), transparent 70%), radial-gradient(36% 42% at 86% 12%, rgba(47, 120, 255, 0.4), transparent 70%), radial-gradient(42% 46% at 80% 86%, rgba(56, 189, 248, 0.42), transparent 70%), radial-gradient(36% 40% at 12% 88%, rgba(99, 102, 241, 0.22), transparent 70%), linear-gradient(160deg, #e8f5ff 0%, #cfe7ff 45%, #b3d6ff 100%); } :root[data-tema="azul"]:not(.dark) body::after { background: radial-gradient(28% 30% at 60% 45%, rgba(255, 255, 255, 0.6), transparent 70%), radial-gradient(22% 26% at 35% 62%, rgba(53, 194, 255, 0.3), transparent 70%); } :root[data-tema="azul"]:not(.dark) .bg-brand-600, :root[data-tema="azul"]:not(.dark) .bg-brand-500, :root[data-tema="azul"]:not(.dark) .bg-blue-600 { background-color: #2f9bff !important; background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.26) 0%, rgba(255, 255, 255, 0) 55%), linear-gradient(120deg, #35c2ff 0%, #2f9bff 40%, #1c74d6 75%, #155fb0 100%) !important; } :root[data-tema="azul"]:not(.dark) .filter-pill.active, :root[data-tema="azul"]:not(.dark) .status-filter-btn.active, :root[data-tema="azul"]:not(.dark) .tpl-chip.active, :root[data-tema="azul"]:not(.dark) .w-tab-btn.is-active { background: linear-gradient(120deg, #35c2ff, #2f9bff 45%, #155fb0) !important; color: #fff !important; } :root[data-tema="azul"]:not(.dark) .glass-nav, :root[data-tema="azul"]:not(.dark) header.fixed, :root[data-tema="azul"]:not(.dark) nav.fixed { background-color: rgba(235, 245, 255, 0.55) !important; } :root[data-tema="azul"]:not(.dark) .tg-nav { background: rgba(235, 245, 255, 0.55) !important; } :root[data-tema="azul"]:not(.dark) #auth-guard-overlay, :root[data-tema="azul"]:not(.dark) #loading-overlay { background: linear-gradient(160deg, #e8f5ff 0%, #cfe7ff 45%, #b3d6ff 100%) !important; } /* ===================================================================== ANIMAÇÕES DOS TEMAS DE VIDRO (claro e escuro, Azul e Liquid Glass) Só transform/opacity (GPU). "scale"/"translate" como propriedades próprias para não brigar com o transform que o elemento já tenha (ex.: -translate-y-1/2). ===================================================================== */ /* entrada: o conteúdo da página sobe e aparece uma vez só, ao abrir. Anima o
inteiro e não cada cartão: as páginas redesenham os cartões logo depois (cache -> dados do Firestore) e, animando cartão por cartão, eles piscavam duas vezes. */ @keyframes tgvSurge { from { opacity: 0; translate: 0 14px; } to { opacity: 1; translate: 0 0; } } :root.tgv-entra:is([data-tema="vidro"], [data-tema="azul"]) main { animation: tgvSurge 0.55s cubic-bezier(0.2, 0.85, 0.25, 1) backwards; } /* menu inferior: a cápsula chega com mola; o item ativo "estala" */ @keyframes tgvSobe { from { opacity: 0; translate: 0 140%; } to { opacity: 1; translate: 0 0; } } @keyframes tgvEstala { 0% { scale: 0.8; } 60% { scale: 1.12; } 100% { scale: 1; } } :root.tgv-entra[data-tema="vidro"] .tg-nav { animation: tgvSobe 0.8s cubic-bezier(0.34, 1.45, 0.5, 1) backwards; } :root.tgv-entra:is([data-tema="vidro"], [data-tema="azul"]) .tg-nav a.is-active { animation: tgvEstala 0.6s 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) backwards; } :root:is([data-tema="vidro"], [data-tema="azul"]) .tg-nav a, :root:is([data-tema="vidro"], [data-tema="azul"]) .tg-nav button { transition: scale 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.25s ease, color 0.25s ease !important; } /* toque: tudo que é clicável "afunda" e volta com mola, como no iOS */ :root:is([data-tema="vidro"], [data-tema="azul"]) :is(button, a.rounded-xl, a.rounded-2xl, a.rounded-3xl, .filter-pill, .chip, [role="button"]):not([class*="transition"]) { transition-property: scale, translate, background-color, border-color, color, box-shadow, opacity; transition-duration: 0.45s, 0.45s, 0.2s, 0.2s, 0.2s, 0.3s, 0.2s; transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1), cubic-bezier(0.34, 1.56, 0.64, 1), ease, ease, ease, ease, ease; } :root:is([data-tema="vidro"], [data-tema="azul"]) :is(button, a.rounded-xl, a.rounded-2xl, a.rounded-3xl, .filter-pill, .chip, [role="button"]):active:not(:disabled) { scale: 0.96; transition-duration: 0.12s; } :root:is([data-tema="vidro"], [data-tema="azul"]) .tg-nav a:active { scale: 0.88; } /* passar o mouse: cartões clicáveis flutuam; botões principais com o degradê "escorrendo" */ @media (hover: hover) { :root:is([data-tema="vidro"], [data-tema="azul"]) :is(a, button).rounded-2xl:is(.bg-white, .dark\:bg-dark-card):hover, :root:is([data-tema="vidro"], [data-tema="azul"]) :is(a, button).rounded-3xl:is(.bg-white, .dark\:bg-dark-card):hover, :root:is([data-tema="vidro"], [data-tema="azul"]) a.rounded-xl:is(.bg-white, .dark\:bg-dark-card):hover { translate: 0 -3px; } :root:is([data-tema="vidro"], [data-tema="azul"]) .tg-nav a:hover { scale: 1.08; } :root:is([data-tema="vidro"], [data-tema="azul"]) :is(button, a):is(.bg-brand-600, .bg-brand-500, .bg-blue-600) { background-size: 180% 180% !important; background-position: 0% 50% !important; transition: background-position 0.7s ease, scale 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease !important; } :root:is([data-tema="vidro"], [data-tema="azul"]) :is(button, a):is(.bg-brand-600, .bg-brand-500, .bg-blue-600):hover { background-position: 100% 50% !important; } } /* luz que acompanha o ponteiro nos cartões (js/tg-tema.js marca o cartão com .tgv-luz) */ :root:is([data-tema="vidro"], [data-tema="azul"]):not(.dark) .tgv-luz { background-image: radial-gradient(360px circle at var(--tgv-mx, 50%) var(--tgv-my, 0%), rgba(255, 255, 255, 0.75), transparent 45%), var(--tgv-vidro) !important; } :root:is([data-tema="vidro"], [data-tema="azul"]).dark .tgv-luz { background-image: radial-gradient(360px circle at var(--tgv-mx, 50%) var(--tgv-my, 0%), rgba(120, 190, 255, 0.14), transparent 45%) !important; } /* janelas (modais): abrem com mola e o fundo embaça aos poucos */ @keyframes tgvJanela { from { opacity: 0; scale: 0.92; translate: 0 14px; } to { opacity: 1; scale: 1; translate: 0 0; } } @keyframes tgvVeu { from { opacity: 0; } to { opacity: 1; } } :root:is([data-tema="vidro"], [data-tema="azul"]) .fixed.inset-0:not(.hidden):is(.bg-black\/50, .bg-black\/60, .bg-black\/70, .bg-black\/80, .bg-gray-900\/50, .bg-gray-900\/60, .bg-gray-900\/70, .bg-gray-900\/75, .bg-gray-900\/80) { animation: tgvVeu 0.28s ease backwards; } :root:is([data-tema="vidro"], [data-tema="azul"]) .fixed.inset-0:not(.hidden) > :is(.bg-white, .dark\:bg-dark-card, .modal-content) { animation: tgvJanela 0.5s cubic-bezier(0.34, 1.3, 0.5, 1) backwards; } @media (prefers-reduced-motion: reduce) { :root:is([data-tema="vidro"], [data-tema="azul"]) *, :root:is([data-tema="vidro"], [data-tema="azul"]) *::before, :root:is([data-tema="vidro"], [data-tema="azul"]) *::after { animation: none !important; transition-duration: 0.01ms !important; } }