/* ============================================================ RADAR RIDER — Modo escuro "Neon Tactical Nexus" Ativado quando recebe a classe .dark (toggle manual). Paleta oficial: template-dark/neon_tactical_nexus/DESIGN.md Todos os valores usam !important para sobrescrever o Tailwind. ============================================================ */ html.dark { color-scheme: dark; /* Superfícies (Deep Space Navy) */ --rr-surface: #0c1324; --rr-surface-dim: #0c1324; --rr-surface-bright: #33394c; --rr-surface-lowest: #070d1f; --rr-surface-low: #151b2d; --rr-surface-container: #191f31; --rr-surface-high: #23293c; --rr-surface-highest: #2e3447; --rr-surface-variant: #2e3447; --rr-on-surface: #ebeced; --rr-on-surface-variant: #c3c9b2; --rr-outline: #8d937e; --rr-outline-variant: #434938; --rr-inverse-surface: #ebeced; --rr-inverse-on-surface: #2a3043; /* Primária (Cyber Lime) */ --rr-primary: #bef264; --rr-on-primary: #233600; --rr-primary-container: #bef264; --rr-on-primary-container: #4b6e00; --rr-primary-fixed: #bff365; --rr-on-primary-fixed: #131f00; --rr-primary-fixed-dim: #a4d64c; --rr-on-primary-fixed-variant: #354e00; --rr-inverse-primary: #476800; /* Secundária (Electric Cyan) */ --rr-secondary: #5de6ff; --rr-on-secondary: #00363e; --rr-secondary-container: #00cbe6; --rr-on-secondary-container: #00515d; --rr-secondary-fixed: #a2eeff; --rr-on-secondary-fixed: #001f25; --rr-secondary-fixed-dim: #2fd9f4; --rr-on-secondary-fixed-variant: #004e5a; /* Terciária (Pulse Red) */ --rr-tertiary: #fffdff; --rr-on-tertiary: #68000a; --rr-tertiary-container: #ffd8d5; --rr-on-tertiary-container: #c12128; --rr-tertiary-fixed: #ffdad7; --rr-on-tertiary-fixed: #410004; --rr-tertiary-fixed-dim: #ffb3ad; --rr-on-tertiary-fixed-variant: #930013; /* Erro */ --rr-error: #ffb4ab; --rr-on-error: #690005; --rr-error-container: #93000a; --rr-on-error-container: #ffdad6; } html.dark body { background-color: var(--rr-surface); } /* ---------- Superfícies ---------- */ html.dark body.bg-surface, html.dark main.bg-surface { background-color: var(--rr-surface) !important; } html.dark .bg-surface { background-color: var(--rr-surface) !important; } html.dark .bg-surface-container-lowest { background-color: var(--rr-surface-lowest) !important; } html.dark .bg-surface-container-low { background-color: var(--rr-surface-low) !important; } html.dark .bg-surface-container { background-color: var(--rr-surface-container) !important; } html.dark .bg-surface-container-high { background-color: var(--rr-surface-high) !important; } html.dark .bg-surface-container-highest { background-color: var(--rr-surface-highest) !important; } html.dark .bg-surface-bright { background-color: var(--rr-surface-bright) !important; } html.dark .bg-surface-dim { background-color: var(--rr-surface-dim) !important; } html.dark .bg-surface-variant { background-color: var(--rr-surface-variant) !important; } html.dark .bg-surface\/70 { background-color: #0e1626 !important; background-color: color-mix(in srgb, var(--rr-surface) 70%, transparent) !important; } html.dark .bg-surface\/80 { background-color: #0b1322 !important; background-color: color-mix(in srgb, var(--rr-surface) 80%, transparent) !important; } html.dark .bg-surface\/90 { background-color: #0a1221 !important; background-color: color-mix(in srgb, var(--rr-surface) 90%, transparent) !important; } html.dark .bg-surface\/95 { background-color: #0c1324 !important; background-color: color-mix(in srgb, var(--rr-surface) 95%, transparent) !important; } html.dark .bg-surface-container\/50 { background-color: #1c2236 !important; background-color: color-mix(in srgb, var(--rr-surface-container) 50%, transparent) !important; } html.dark .bg-surface-container\/60 { background-color: #1b2132 !important; background-color: color-mix(in srgb, var(--rr-surface-container) 60%, transparent) !important; } html.dark .bg-surface-container-low\/60 { background-color: #232a3e !important; background-color: color-mix(in srgb, var(--rr-surface-low) 60%, transparent) !important; } html.dark .bg-surface-container-low\/90 { background-color: #141b2b !important; background-color: color-mix(in srgb, var(--rr-surface-low) 90%, transparent) !important; } html.dark .bg-surface-container-high\/50 { background-color: #39404f !important; background-color: color-mix(in srgb, var(--rr-surface-high) 50%, transparent) !important; } html.dark .bg-surface-container-lowest\/80 { background-color: #0d1428 !important; background-color: color-mix(in srgb, var(--rr-surface-lowest) 80%, transparent) !important; } html.dark .bg-surface-container-lowest\/90 { background-color: #0a1020 !important; background-color: color-mix(in srgb, var(--rr-surface-lowest) 90%, transparent) !important; } /* ---------- Texto ---------- */ html.dark .text-on-surface { color: #ebeced !important; } html.dark .text-on-surface-variant { color: var(--rr-on-surface-variant) !important; } html.dark .text-on-surface-variant\/50 { color: color-mix(in srgb, var(--rr-on-surface-variant) 50%, transparent) !important; } html.dark .text-on-surface-variant\/60 { color: color-mix(in srgb, var(--rr-on-surface-variant) 60%, transparent) !important; } html.dark .text-outline { color: var(--rr-outline) !important; } html.dark .text-outline-variant { color: var(--rr-outline-variant) !important; } html.dark .text-surface { color: var(--rr-surface) !important; } html.dark .text-surface-dim { color: #8d937e !important; } html.dark .text-surface-container-high { color: var(--rr-surface-highest) !important; } html.dark .text-on-background { color: var(--rr-on-surface) !important; } /* ---------- Bordas ---------- */ html.dark .border-surface-container-high { border-color: var(--rr-surface-high) !important; } html.dark .border-surface-container-low { border-color: var(--rr-surface-low) !important; } html.dark .border-surface-container-lowest { border-color: var(--rr-surface-lowest) !important; } html.dark .border-surface-variant { border-color: var(--rr-surface-variant) !important; } html.dark .border-surface-variant\/30 { border-color: color-mix(in srgb, var(--rr-surface-variant) 30%, transparent) !important; } html.dark .border-outline { border-color: var(--rr-outline) !important; } html.dark .border-outline\/20 { border-color: color-mix(in srgb, var(--rr-outline) 20%, transparent) !important; } html.dark .border-outline\/30 { border-color: color-mix(in srgb, var(--rr-outline) 30%, transparent) !important; } html.dark .border-outline\/50 { border-color: color-mix(in srgb, var(--rr-outline) 50%, transparent) !important; } html.dark .border-outline-variant { border-color: var(--rr-outline-variant) !important; } html.dark .border-outline-variant\/30 { border-color: color-mix(in srgb, var(--rr-outline-variant) 30%, transparent) !important; } /* ---------- Anéis ---------- */ html.dark .ring-outline-variant { --tw-ring-color: var(--rr-outline-variant) !important; } /* ---------- Cor primária (Cyber Lime) ---------- */ html.dark .bg-primary { background-color: var(--rr-primary) !important; } html.dark .text-primary { color: var(--rr-primary-fixed) !important; } html.dark .text-on-primary { color: var(--rr-on-primary) !important; } html.dark .bg-primary-container { background-color: var(--rr-primary-container) !important; } html.dark .text-on-primary-container { color: var(--rr-on-primary-container) !important; } html.dark .text-on-primary-container\/80 { color: color-mix(in srgb, var(--rr-on-primary-container) 80%, transparent) !important; } html.dark .bg-primary-fixed { background-color: var(--rr-primary-fixed) !important; } html.dark .text-primary-fixed { color: var(--rr-primary-fixed) !important; } html.dark .text-on-primary-fixed { color: var(--rr-on-primary-fixed) !important; } html.dark .bg-primary-fixed\/10 { background-color: color-mix(in srgb, var(--rr-primary-fixed) 10%, transparent) !important; } html.dark .bg-primary-fixed-dim { background-color: var(--rr-primary-fixed-dim) !important; } html.dark .text-primary-fixed-dim { color: var(--rr-primary-fixed-dim) !important; } html.dark .text-on-primary-fixed-dim { color: var(--rr-on-primary-fixed) !important; } html.dark .bg-primary\/5 { background-color: color-mix(in srgb, var(--rr-primary-fixed) 5%, transparent) !important; } html.dark .bg-primary\/10 { background-color: color-mix(in srgb, var(--rr-primary-fixed) 10%, transparent) !important; } html.dark .bg-primary\/20 { background-color: color-mix(in srgb, var(--rr-primary-fixed) 20%, transparent) !important; } html.dark .bg-primary-fixed\/40 { background-color: color-mix(in srgb, var(--rr-primary-fixed) 40%, transparent) !important; } html.dark .border-primary { border-color: var(--rr-primary-fixed) !important; } html.dark .border-primary\/20 { border-color: color-mix(in srgb, var(--rr-primary-fixed) 20%, transparent) !important; } html.dark .border-primary-fixed\/10 { border-color: color-mix(in srgb, var(--rr-primary-fixed) 10%, transparent) !important; } html.dark .border-primary-fixed\/20 { border-color: color-mix(in srgb, var(--rr-primary-fixed) 20%, transparent) !important; } html.dark .border-primary-fixed\/40 { border-color: color-mix(in srgb, var(--rr-primary-fixed) 40%, transparent) !important; } html.dark .ring-primary { --tw-ring-color: var(--rr-primary-fixed) !important; } /* ---------- Cor secundária (Electric Cyan) ---------- */ html.dark .bg-secondary { background-color: var(--rr-secondary) !important; } html.dark .text-secondary { color: var(--rr-secondary) !important; } html.dark .text-on-secondary { color: var(--rr-on-secondary) !important; } html.dark .bg-secondary-container { background-color: var(--rr-secondary-container) !important; } html.dark .text-on-secondary-container { color: var(--rr-on-secondary-container) !important; } html.dark .bg-secondary-fixed { background-color: var(--rr-secondary-fixed) !important; } html.dark .text-secondary-fixed { color: var(--rr-secondary-fixed) !important; } html.dark .text-on-secondary-fixed { color: var(--rr-on-secondary-fixed) !important; } html.dark .bg-secondary-fixed\/10 { background-color: color-mix(in srgb, var(--rr-secondary-fixed) 10%, transparent) !important; } html.dark .bg-secondary-container\/10 { background-color: color-mix(in srgb, var(--rr-secondary-container) 10%, transparent) !important; } html.dark .bg-secondary-container\/20 { background-color: color-mix(in srgb, var(--rr-secondary-container) 20%, transparent) !important; } html.dark .bg-secondary-container\/40 { background-color: color-mix(in srgb, var(--rr-secondary-container) 40%, transparent) !important; } html.dark .bg-secondary-container\/95 { background-color: color-mix(in srgb, var(--rr-secondary-container) 95%, transparent) !important; } html.dark .border-secondary\/30 { border-color: color-mix(in srgb, var(--rr-secondary) 30%, transparent) !important; } html.dark .border-secondary\/40 { border-color: color-mix(in srgb, var(--rr-secondary) 40%, transparent) !important; } /* ---------- Cor terciária (Pulse Red) ---------- */ html.dark .bg-tertiary { background-color: var(--rr-tertiary-container) !important; } html.dark .text-tertiary { color: var(--rr-tertiary) !important; } html.dark .text-on-tertiary { color: var(--rr-on-tertiary) !important; } html.dark .bg-tertiary-container { background-color: var(--rr-tertiary-container) !important; } html.dark .text-on-tertiary-container { color: var(--rr-on-tertiary-container) !important; } html.dark .bg-tertiary-fixed { background-color: var(--rr-tertiary-fixed) !important; } html.dark .text-on-tertiary-fixed { color: var(--rr-on-tertiary-fixed) !important; } html.dark .bg-tertiary-fixed-dim { background-color: var(--rr-tertiary-fixed-dim) !important; } html.dark .text-tertiary-fixed-dim { color: var(--rr-tertiary-fixed-dim) !important; } html.dark .bg-tertiary-fixed-dim\/20 { background-color: color-mix(in srgb, var(--rr-tertiary-fixed-dim) 20%, transparent) !important; } html.dark .border-tertiary-fixed-dim { border-color: var(--rr-tertiary-fixed-dim) !important; } /* ---------- Erro ---------- */ html.dark .bg-error { background-color: var(--rr-error) !important; } html.dark .text-error { color: var(--rr-error) !important; } html.dark .text-on-error { color: var(--rr-on-error) !important; } html.dark .bg-error-container { background-color: var(--rr-error-container) !important; } html.dark .text-on-error-container { color: var(--rr-on-error-container) !important; } html.dark .bg-error\/10 { background-color: color-mix(in srgb, var(--rr-error) 10%, transparent) !important; } html.dark .bg-error\/5 { background-color: color-mix(in srgb, var(--rr-error) 5%, transparent) !important; } html.dark .bg-error-container\/30 { background-color: color-mix(in srgb, var(--rr-error-container) 30%, transparent) !important; } html.dark .bg-error-container\/80 { background-color: color-mix(in srgb, var(--rr-error-container) 80%, transparent) !important; } html.dark .bg-error-container\/90 { background-color: color-mix(in srgb, var(--rr-error-container) 90%, transparent) !important; } html.dark .border-error\/40 { border-color: color-mix(in srgb, var(--rr-error) 40%, transparent) !important; } /* ---------- Admin: sidebar e topbar usam superfície escura + texto claro ---------- */ html.dark aside.bg-primary { background-color: var(--rr-surface-container-lowest) !important; color: var(--rr-on-surface) !important; } html.dark aside.bg-primary .text-on-primary { color: var(--rr-primary-fixed) !important; } html.dark .sticky.top-0.z-20.bg-primary { background-color: var(--rr-surface-container-lowest) !important; color: var(--rr-on-surface) !important; } html.dark .sticky.top-0.z-20.bg-primary .text-on-primary { color: var(--rr-on-surface) !important; } /* ---------- Diversos ---------- */ html.dark .bg-inverse-surface { background-color: var(--rr-inverse-surface) !important; } html.dark .text-inverse-on-surface { color: var(--rr-inverse-on-surface) !important; } html.dark .bg-on-surface { background-color: var(--rr-on-surface) !important; } html.dark .text-on-surface { color: #ebeced !important; } html.dark .bg-on-surface-variant { background-color: #454652 !important; } /* Botões/avisos originalmente brancos viram superfície escura no HUD */ html.dark .bg-white { background-color: var(--rr-surface-container) !important; } html.dark .bg-white\/50 { background-color: color-mix(in srgb, var(--rr-surface-container) 50%, transparent) !important; } /* Caixa de erro nativa (setup.php) */ html.dark .bg-red-50 { background-color: var(--rr-error-container) !important; } html.dark .text-red-800 { color: var(--rr-on-error-container) !important; } html.dark .border-red-200 { border-color: color-mix(in srgb, var(--rr-error) 60%, transparent) !important; } html.dark .bg-surface\/80, html.dark .bg-surface\/90 { backdrop-filter: blur(20px) saturate(150%); } /* ---------- Sombras ---------- */ html.dark .shadow-sm { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) !important; } html.dark .shadow-md { box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4) !important; } html.dark .shadow-lg { box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45) !important; } html.dark .shadow-xl { box-shadow: 0 12px 28px rgba(0, 0, 0, 0.5) !important; } html.dark .shadow-2xl { box-shadow: 0 20px 40px rgba(0, 0, 0, 0.55) !important; } /* ---------- Modais ---------- */ html.dark #sos-modal .rounded-3xl, html.dark #confirm-modal .rounded-3xl, html.dark #logo-modal .rounded-3xl, html.dark #bottom-sheet { border-color: var(--rr-outline-variant) !important; } /* ---------- Formulários nativos ---------- */ html.dark select option, html.dark input::placeholder { color: var(--rr-on-surface-variant); } /* ---------- Scrollbar ---------- */ html.dark *::-webkit-scrollbar { background-color: var(--rr-surface); } html.dark *::-webkit-scrollbar-thumb { background-color: var(--rr-outline-variant); border-radius: 8px; } /* ---------- Leaflet / mapa ---------- */ html.dark .leaflet-container { background: var(--rr-surface-dim); } html.dark .leaflet-tile-pane { filter: brightness(0.6) invert(1) contrast(3) hue-rotate(200deg) saturate(0.35) brightness(0.7); } html.dark .leaflet-popup-content-wrapper, html.dark .leaflet-popup-tip { background: var(--rr-surface-lowest); color: var(--rr-on-surface); } html.dark .leaflet-bar a { background: var(--rr-surface-lowest); color: var(--rr-on-surface); border-color: var(--rr-outline-variant); } html.dark .leaflet-bar a:hover { background: var(--rr-surface-high); } html.dark .leaflet-control-attribution { background: color-mix(in srgb, var(--rr-surface) 80%, transparent) !important; color: var(--rr-outline) !important; } html.dark .leaflet-control-attribution a { color: var(--rr-primary-fixed) !important; } /* ============================================================ Utilidades táticas (Neon Tactical Nexus) Fallbacks (modo claro) — as regras em html.dark abaixo sobrescrevem com o visual HUD quando o tema escuro está ativo. ============================================================ */ .tactical-blur { background-color: #ffffff; -webkit-backdrop-filter: blur(20px) saturate(150%); backdrop-filter: blur(20px) saturate(150%); } @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) { .tactical-blur { background-color: rgba(255, 255, 255, 0.85); } } .glow-border { box-shadow: 0 -1px 8px rgba(0, 0, 0, 0.04); } .rr-card { background-color: #ffffff; } /* Navegação inferior com vidro (modo escuro) */ html.dark .tactical-blur { -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%); background-color: #0a1120 !important; background-color: color-mix(in srgb, var(--rr-surface) 78%, transparent) !important; border-top: 1px solid var(--rr-outline-variant); } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { html.dark .tactical-blur { background-color: var(--rr-surface) !important; } } html.dark .glow-border { box-shadow: 0 -1px 0 rgba(190, 242, 100, 0.18), 0 0 18px rgba(0, 0, 0, 0.45); } /* Cartão HUD: translúcido com borda superior em destaque (modo escuro) */ html.dark .rr-card { background-color: #1c2236 !important; background-color: color-mix(in srgb, var(--rr-surface-container-high) 55%, transparent) !important; backdrop-filter: blur(14px); border: 1px solid var(--rr-outline-variant); border-top: 2px solid color-mix(in srgb, var(--rr-primary-fixed) 45%, transparent); box-shadow: 0 4px 18px rgba(0, 0, 0, 0.4); } /* Rótulo técnico em caixa alta (instrument panel) */ html.dark .rr-label { font-family: 'JetBrains Mono', monospace; text-transform: uppercase; letter-spacing: 0.1em; } /* Leitura de dados técnica */ html.dark .rr-code { font-family: 'JetBrains Mono', monospace; letter-spacing: 0.02em; } /* Brilhos neón */ html.dark .rr-glow-lime { text-shadow: 0 0 8px rgba(191, 243, 101, 0.45); } html.dark .rr-glow-cyan { text-shadow: 0 0 8px rgba(93, 230, 255, 0.45); } html.dark .rr-glow-red { text-shadow: 0 0 8px rgba(255, 180, 171, 0.45); } html.dark .rr-glow-btn-lime { box-shadow: 0 0 20px rgba(190, 242, 100, 0.22), 0 4px 14px rgba(0, 0, 0, 0.4); } html.dark .rr-glow-btn-cyan { box-shadow: 0 0 20px rgba(93, 230, 255, 0.22), 0 4px 14px rgba(0, 0, 0, 0.4); } html.dark .rr-glow-btn-red { box-shadow: 0 0 20px rgba(255, 180, 171, 0.22), 0 4px 14px rgba(0, 0, 0, 0.4); } /* Item de navegação ativo */ html.dark .rr-nav-active { color: var(--rr-primary-fixed-dim) !important; text-shadow: 0 0 10px rgba(164, 214, 76, 0.5); filter: drop-shadow(0 0 8px rgba(164, 214, 76, 0.35)); } /* Ponto de status pulsante */ html.dark .rr-pulse-dot { width: 8px; height: 8px; border-radius: 9999px; background: var(--rr-primary-fixed); box-shadow: 0 0 8px rgba(191, 243, 101, 0.8); animation: rr-pulse 0.5s ease-in-out infinite; } @keyframes rr-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.55; transform: scale(0.7); } } /* Fundo de grade HUD (micro-textura) */ html.dark .rr-grid { background-image: linear-gradient(rgba(190, 242, 100, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(190, 242, 100, 0.04) 1px, transparent 1px); background-size: 28px 28px; } /* Barra de progresso segmentada (stepped) */ html.dark .rr-stepped { background-image: repeating-linear-gradient( 90deg, var(--rr-primary-fixed) 0 12px, transparent 12px 16px ); } /* Botão de alternância */ #theme-toggle { cursor: pointer; -webkit-tap-highlight-color: transparent; } #theme-toggle .material-symbols-outlined { font-size: 22px; }