/* ============================================================ 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: var(--primary); background: var(--primary-tint); color: var(--primary-darker); } /* ── Cor do sistema (swatches) ── */ .cf-accent-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; } .cf-accent-swatch { position: relative; width: 100%; aspect-ratio: 1; border: 2.5px solid transparent; border-radius: 12px; background: var(--sw); cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; display: flex; align-items: center; justify-content: center; } .cf-accent-swatch i { font-size: .8rem; color: #fff; opacity: 0; transform: scale(0.4); transition: all .18s ease; text-shadow: 0 1px 3px rgba(0,0,0,.35); } .cf-accent-swatch:hover { transform: scale(1.1); box-shadow: 0 4px 12px rgba(0,0,0,.18); } .cf-accent-swatch.active { border-color: #14171a; box-shadow: 0 0 0 2px #fff inset; } .cf-accent-swatch.active i { opacity: 1; transform: scale(1); } .cf-accent-custom { position: relative; width: 100%; aspect-ratio: 1; border: 2px dashed #cbd5e1; border-radius: 12px; cursor: pointer; display: flex; align-items: center; justify-content: center; color: #64748b; font-size: .85rem; transition: all .15s ease; overflow: hidden; background: conic-gradient(from 180deg, #f6aa1b, #ef4444, #ec4899, #8b5cf6, #3b82f6, #14b8a6, #10b981, #f6aa1b); } .cf-accent-custom i { color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.5); pointer-events: none; } .cf-accent-custom:hover { transform: scale(1.1); } .cf-accent-custom.active { border: 2.5px solid #14171a; box-shadow: 0 0 0 2px #fff inset; } .cf-accent-custom input[type="color"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; border: none; } .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; }