/* ============================================================ TEMA ESCURO + PAINEL DE CONFIGURAÇÕES ------------------------------------------------------------ O tema escuro usa "inversão inteligente": inverte as cores de toda a página (inclusive estilos inline dos módulos) e depois contra-inverte imagens/vídeos para que fotos fiquem normais. Ativado por . ============================================================ */ html { transition: filter .25s ease; } html[data-theme="dark"] { background: #0f172a; /* 0.92 evita preto/branco puros (fica mais confortável) */ filter: invert(0.92) hue-rotate(180deg); } /* Contra-inverte mídia e o que não deve inverter (fotos, logos, QR, mapas) */ html[data-theme="dark"] img, html[data-theme="dark"] video, html[data-theme="dark"] canvas, html[data-theme="dark"] iframe, html[data-theme="dark"] embed, html[data-theme="dark"] object, html[data-theme="dark"] .no-invert, html[data-theme="dark"] [data-no-invert] { filter: invert(1) hue-rotate(180deg); } /* Evita "flash" branco atrás de elementos translúcidos no dark */ html[data-theme="dark"] body { background: #f4f4f6; /* após inversão vira um cinza escuro */ } /* ============================================================ PAINEL DE CONFIGURAÇÕES (dropdown do ícone de engrenagem) ============================================================ */ #cfSettingsOverlay { position: fixed; inset: 0; z-index: 9998; background: transparent; } #cfSettingsPanel { position: fixed; top: 58px; right: 16px; width: 290px; max-width: calc(100vw - 24px); background: #ffffff; border: 1px solid #e5e7eb; border-radius: 16px; box-shadow: 0 20px 55px rgba(0, 0, 0, .22); z-index: 9999; overflow: hidden; animation: cfSettingsIn .16s ease; font-family: 'Inter', -apple-system, sans-serif; } @keyframes cfSettingsIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } .cf-set-header { padding: 16px 18px 12px; border-bottom: 1px solid #f0f1f4; } .cf-set-header h4 { margin: 0; font-size: 1rem; font-weight: 700; color: #14171a; display: flex; align-items: center; gap: 8px; } .cf-set-user { margin-top: 2px; font-size: .8rem; color: #657786; } .cf-set-section { padding: 14px 18px; } .cf-set-label { font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #9ca3af; margin-bottom: 10px; } .cf-theme-options { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; } .cf-theme-btn { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 6px; border: 1.5px solid #e1e8ed; border-radius: 12px; background: #fff; cursor: pointer; font-size: .78rem; font-weight: 600; color: #374151; transition: all .15s ease; } .cf-theme-btn i { font-size: 1.15rem; } .cf-theme-btn:hover { border-color: #cbd5e1; background: #f8fafc; } .cf-theme-btn.active { border-color: #3b82f6; background: #eff6ff; color: #1d4ed8; } .cf-set-footer { padding: 12px 18px 16px; border-top: 1px solid #f0f1f4; } .cf-set-logout { width: 100%; padding: 10px; border: 1.5px solid #fecaca; background: #fff; color: #dc2626; border-radius: 10px; font-weight: 600; font-size: .88rem; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; transition: background .15s ease; } .cf-set-logout:hover { background: #fef2f2; }