/* ============================================================ RifaZap - Temas do Painel Aplicado via data-theme no (definido em config/settings.json) 10 temas claros + 3 escuros ============================================================ */ /* --- 1. Padrão (roxo) --- */ [data-theme="padrao"] { --color-bg: #F3F4F6; --color-surface: #FFFFFF; --color-sidebar: #1E293B; --color-sidebar-hover: #334155; --color-primary: #8B5CF6; --color-primary-hover: #7C3AED; --color-text: #1F2937; --color-text-muted: #6B7280; --color-text-light: #F9FAFB; --color-border: #E5E7EB; --color-success: #10B981; --color-warning: #F59E0B; --color-danger: #EF4444; --color-info: #3B82F6; } /* --- 2. Azul Oceano --- */ [data-theme="azul"] { --color-bg: #EFF4FB; --color-surface: #FFFFFF; --color-sidebar: #102A43; --color-sidebar-hover: #1E3A5F; --color-primary: #2563EB; --color-primary-hover: #1D4ED8; --color-text: #1E293B; --color-text-muted: #64748B; --color-text-light: #F1F5F9; --color-border: #E2E8F0; --color-success: #10B981; --color-warning: #F59E0B; --color-danger: #EF4444; --color-info: #3B82F6; } /* --- 3. Verde Esmeralda --- */ [data-theme="verde"] { --color-bg: #F0F7F4; --color-surface: #FFFFFF; --color-sidebar: #0F3D2E; --color-sidebar-hover: #14532D; --color-primary: #059669; --color-primary-hover: #047857; --color-text: #1F2937; --color-text-muted: #64748B; --color-text-light: #F0FDF4; --color-border: #E5E7EB; --color-success: #10B981; --color-warning: #D97706; --color-danger: #DC2626; --color-info: #0284C7; } /* --- 4. Vermelho Rubi --- */ [data-theme="vermelho"] { --color-bg: #FBF1F1; --color-surface: #FFFFFF; --color-sidebar: #3B0D0D; --color-sidebar-hover: #5B1414; --color-primary: #DC2626; --color-primary-hover: #B91C1C; --color-text: #2D1B1B; --color-text-muted: #7F6B6B; --color-text-light: #FEF2F2; --color-border: #F1E0E0; --color-success: #10B981; --color-warning: #F59E0B; --color-danger: #DC2626; --color-info: #2563EB; } /* --- 5. Laranja Sol --- */ [data-theme="laranja"] { --color-bg: #FDF6EE; --color-surface: #FFFFFF; --color-sidebar: #431407; --color-sidebar-hover: #5C1F0A; --color-primary: #EA580C; --color-primary-hover: #C2410C; --color-text: #2D2218; --color-text-muted: #8A7A68; --color-text-light: #FFF7ED; --color-border: #F2E4D5; --color-success: #059669; --color-warning: #D97706; --color-danger: #DC2626; --color-info: #0284C7; } /* --- 6. Rosa Chá --- */ [data-theme="rosa"] { --color-bg: #FBF1F6; --color-surface: #FFFFFF; --color-sidebar: #4A0E33; --color-sidebar-hover: #6B144A; --color-primary: #DB2777; --color-primary-hover: #BE185D; --color-text: #331B28; --color-text-muted: #8B6B7B; --color-text-light: #FDF2F8; --color-border: #F3E0EA; --color-success: #10B981; --color-warning: #D97706; --color-danger: #E11D48; --color-info: #7C3AED; } /* --- 7. Turquesa --- */ [data-theme="turquesa"] { --color-bg: #EFF9F9; --color-surface: #FFFFFF; --color-sidebar: #0B3B3B; --color-sidebar-hover: #115151; --color-primary: #0D9488; --color-primary-hover: #0F766E; --color-text: #1C2E2E; --color-text-muted: #5F7A7A; --color-text-light: #F0FDFA; --color-border: #D8ECEC; --color-success: #0D9488; --color-warning: #D97706; --color-danger: #DC2626; --color-info: #0891B2; } /* --- 8. Índigo Royal --- */ [data-theme="indigo"] { --color-bg: #F0F1FC; --color-surface: #FFFFFF; --color-sidebar: #1E1B4B; --color-sidebar-hover: #312E81; --color-primary: #4F46E5; --color-primary-hover: #4338CA; --color-text: #1E293B; --color-text-muted: #64748B; --color-text-light: #EEF2FF; --color-border: #E2E4F5; --color-success: #059669; --color-warning: #D97706; --color-danger: #DC2626; --color-info: #3B82F6; } /* --- 9. Grafite --- */ [data-theme="grafite"] { --color-bg: #F1F3F5; --color-surface: #FFFFFF; --color-sidebar: #111827; --color-sidebar-hover: #1F2937; --color-primary: #475569; --color-primary-hover: #334155; --color-text: #1F2937; --color-text-muted: #6B7280; --color-text-light: #F9FAFB; --color-border: #E5E7EB; --color-success: #059669; --color-warning: #D97706; --color-danger: #DC2626; --color-info: #3B82F6; } /* --- 10. Café Expresso --- */ [data-theme="cafe"] { --color-bg: #F7F2EA; --color-surface: #FFFFFF; --color-sidebar: #3E2723; --color-sidebar-hover: #56352F; --color-primary: #8B5E34; --color-primary-hover: #6F4A26; --color-text: #2D241C; --color-text-muted: #857A6C; --color-text-light: #FAF5EF; --color-border: #EBE2D5; --color-success: #059669; --color-warning: #B45309; --color-danger: #B91C1C; --color-info: #0E7490; } /* --- 11. Escuro: Meia-Noite --- */ [data-theme="escuro_meia_noite"] { --color-bg: #0B1220; --color-surface: #131C2E; --color-sidebar: #0A0F1C; --color-sidebar-hover: #1A2438; --color-primary: #818CF8; --color-primary-hover: #A5B4FC; --color-text: #EEF2F8; --color-text-muted: #AEBACD; --color-text-light: #F8FAFC; --color-border: #24304A; --color-success: #34D399; --color-warning: #FBBF24; --color-danger: #F87171; --color-info: #60A5FA; } /* --- 12. Escuro: Floresta --- */ [data-theme="escuro_floresta"] { --color-bg: #0B1A12; --color-surface: #12281B; --color-sidebar: #08130C; --color-sidebar-hover: #1A3B27; --color-primary: #34D399; --color-primary-hover: #6EE7B7; --color-text: #EAF7EF; --color-text-muted: #A9C9B5; --color-text-light: #F0FDF4; --color-border: #1F3A2E; --color-success: #34D399; --color-warning: #FBBF24; --color-danger: #F87171; --color-info: #22D3EE; } /* --- 13. Escuro: Violeta --- */ [data-theme="escuro_violeta"] { --color-bg: #150F24; --color-surface: #1E1733; --color-sidebar: #0F0A1C; --color-sidebar-hover: #2A2050; --color-primary: #A78BFA; --color-primary-hover: #C4B5FD; --color-text: #F2EFFD; --color-text-muted: #B8B2DA; --color-text-light: #F5F3FF; --color-border: #2E2450; --color-success: #34D399; --color-warning: #FBBF24; --color-danger: #F87171; --color-info: #818CF8; } /* --- 14. Cinza Prata (claro) --- */ [data-theme="cinza_prata"] { --color-bg: #F5F6F8; --color-surface: #FFFFFF; --color-sidebar: #374151; --color-sidebar-hover: #4B5563; --color-primary: #6B7280; --color-primary-hover: #4B5563; --color-text: #111827; --color-text-muted: #6B7280; --color-text-light: #F9FAFB; --color-border: #E5E7EB; --color-success: #059669; --color-warning: #D97706; --color-danger: #DC2626; --color-info: #64748B; } /* --- 15. Cinza Escuro --- */ [data-theme="escuro_cinza"] { --color-bg: #111418; --color-surface: #1A1E24; --color-sidebar: #0C0E11; --color-sidebar-hover: #23282F; --color-primary: #94A3B8; --color-primary-hover: #B6C2CF; --color-text: #E5E7EB; --color-text-muted: #9CA3AF; --color-text-light: #F3F4F6; --color-border: #2A3038; --color-success: #34D399; --color-warning: #FBBF24; --color-danger: #F87171; --color-info: #94A3B8; } /* ============================================================ Ajustes de componentes para temas escuros ============================================================ */ [data-theme^="escuro"] { color-scheme: dark; --color-input-bg: #1E293B; --color-input-border: #334155; } /* Botões neutros: fundo claro nos temas claros → fundo azul-escuro nos escuros */ [data-theme^="escuro"] .btn-outline { background: #24304A; border-color: #334155; color: #F1F5F9; } [data-theme^="escuro"] .btn-outline:hover { background: #334155; border-color: #475569; color: #F1F5F9; } [data-theme^="escuro"] .filter-btn { background: #24304A; border-color: #334155; color: #F1F5F9; } [data-theme^="escuro"] .filter-btn:hover { background: #334155; color: #F1F5F9; } [data-theme^="escuro"] body { color: var(--color-text); } [data-theme^="escuro"] .card-title, [data-theme^="escuro"] .form-label { color: #F1F5F9; } [data-theme^="escuro"] .form-help { color: #B4C0D3; } [data-theme^="escuro"] .form-input, [data-theme^="escuro"] .form-textarea, [data-theme^="escuro"] .form-select { background: var(--color-input-bg, #1E293B); border-color: var(--color-input-border, #334155); color: #F1F5F9; box-shadow: none; } [data-theme^="escuro"] .form-input::placeholder, [data-theme^="escuro"] .form-textarea::placeholder { color: #94A3B8; } [data-theme^="escuro"] tbody tr:hover { background: #1E293B; } [data-theme^="escuro"] .badge-success { background: #065F46; color: #D1FAE5; } [data-theme^="escuro"] .badge-warning { background: #78350F; color: #FEF3C7; } [data-theme^="escuro"] .badge-danger { background: #7F1D1D; color: #FEE2E2; } [data-theme^="escuro"] .badge-info { background: #1E3A5F; color: #DBEAFE; } [data-theme^="escuro"] .badge-default { background: #334155; color: #E2E8F0; } [data-theme^="escuro"] .alert-error { background: #450A0A; color: #FECACA; border: 1px solid #7F1D1D; } [data-theme^="escuro"] .alert-success { background: #052E16; color: #BBF7D0; border: 1px solid #166534; } [data-theme^="escuro"] .alert-info { background: #0C2A47; color: #BAE6FD; border: 1px solid #1E40AF; } [data-theme^="escuro"] .toast { background: #1E293B; color: #E2E8F0; } [data-theme^="escuro"] .card-header { border-color: #24304A; } [data-theme^="escuro"] .table th { color: #E2E8F0; } [data-theme^="escuro"] .text-muted { color: #B4C0D3; } /* Modais com superfície escura */ [data-theme^="escuro"] .modal-overlay .modal, [data-theme^="escuro"] .modal-overlay .modal-box, [data-theme^="escuro"] .modal-card { background: #131C2E; border-color: #24304A; } [data-theme^="escuro"] .modal-title, [data-theme^="escuro"] .modal-box h3, [data-theme^="escuro"] .modal-card h3 { color: #F1F5F9; } [data-theme^="escuro"] .modal p, [data-theme^="escuro"] .modal-box p, [data-theme^="escuro"] .modal-card p, [data-theme^="escuro"] .modal .text-muted { color: #B4C0D3; } [data-theme^="escuro"] .modal-box .modal-icon { background: #450A0A; color: #FCA5A5; } [data-theme^="escuro"] .modal-btn-cancelar { background: #334155; color: #E2E8F0; } [data-theme^="escuro"] .modal-btn-cancelar:hover { background: #475569; } /* Resgate: textos com cor escura fixa inline sobre superfície escura. Ignora elementos com background claro inline (permanecem legíveis). */ [data-theme^="escuro"] .card [style*="color:#333"]:not([style*="background:"]), [data-theme^="escuro"] .card [style*="color:#444"]:not([style*="background:"]), [data-theme^="escuro"] .card [style*="color:#555"]:not([style*="background:"]), [data-theme^="escuro"] .card [style*="color:#666"]:not([style*="background:"]), [data-theme^="escuro"] .card [style*="color:#777"]:not([style*="background:"]), [data-theme^="escuro"] .card [style*="color:#888"]:not([style*="background:"]), [data-theme^="escuro"] .card [style*="color:#999"]:not([style*="background:"]), [data-theme^="escuro"] .card [style*="color:#222"]:not([style*="background:"]), [data-theme^="escuro"] .card [style*="color:#111"]:not([style*="background:"]), [data-theme^="escuro"] .card [style*="color:#000"]:not([style*="background:"]), [data-theme^="escuro"] .card [style*="color:#1f2937"]:not([style*="background:"]), [data-theme^="escuro"] .card [style*="color:#1e293b"]:not([style*="background:"]), [data-theme^="escuro"] .card [style*="color:#374151"]:not([style*="background:"]), [data-theme^="escuro"] .card [style*="color:#4b5563"]:not([style*="background:"]), [data-theme^="escuro"] .card [style*="color:#475569"]:not([style*="background:"]), [data-theme^="escuro"] .card [style*="color:#6b7280"]:not([style*="background:"]), [data-theme^="escuro"] .card [style*="color:#64748b"]:not([style*="background:"]), [data-theme^="escuro"] .card [style*="color:#111827"]:not([style*="background:"]), [data-theme^="escuro"] .card [style*="color:#0f172a"]:not([style*="background:"]), [data-theme^="escuro"] .card [style*="color:#2d2d2d"]:not([style*="background:"]), [data-theme^="escuro"] .card [style*="color:#1f1f1f"]:not([style*="background:"]), [data-theme^="escuro"] .card [style*="color:#3f3f3f"]:not([style*="background:"]), [data-theme^="escuro"] .card [style*="color:#4f4f4f"]:not([style*="background:"]), [data-theme^="escuro"] .card [style*="color:#262626"]:not([style*="background:"]), [data-theme^="escuro"] .card [style*="color:#404040"]:not([style*="background:"]), [data-theme^="escuro"] .card [style*="color:#515151"]:not([style*="background:"]), [data-theme^="escuro"] .card [style*="color:#1c1917"]:not([style*="background:"]), [data-theme^="escuro"] .modal-overlay [style*="color:#333"]:not([style*="background:"]), [data-theme^="escuro"] .modal-overlay [style*="color:#444"]:not([style*="background:"]), [data-theme^="escuro"] .modal-overlay [style*="color:#555"]:not([style*="background:"]), [data-theme^="escuro"] .modal-overlay [style*="color:#666"]:not([style*="background:"]), [data-theme^="escuro"] .modal-overlay [style*="color:#777"]:not([style*="background:"]), [data-theme^="escuro"] .modal-overlay [style*="color:#888"]:not([style*="background:"]), [data-theme^="escuro"] .modal-overlay [style*="color:#999"]:not([style*="background:"]), [data-theme^="escuro"] .modal-overlay [style*="color:#222"]:not([style*="background:"]), [data-theme^="escuro"] .modal-overlay [style*="color:#111"]:not([style*="background:"]), [data-theme^="escuro"] .modal-overlay [style*="color:#000"]:not([style*="background:"]), [data-theme^="escuro"] .modal-overlay [style*="color:#1f2937"]:not([style*="background:"]), [data-theme^="escuro"] .modal-overlay [style*="color:#1e293b"]:not([style*="background:"]), [data-theme^="escuro"] .modal-overlay [style*="color:#374151"]:not([style*="background:"]), [data-theme^="escuro"] .modal-overlay [style*="color:#4b5563"]:not([style*="background:"]), [data-theme^="escuro"] .modal-overlay [style*="color:#475569"]:not([style*="background:"]), [data-theme^="escuro"] .modal-overlay [style*="color:#6b7280"]:not([style*="background:"]), [data-theme^="escuro"] .modal-overlay [style*="color:#64748b"]:not([style*="background:"]), [data-theme^="escuro"] .modal-overlay [style*="color:#111827"]:not([style*="background:"]), [data-theme^="escuro"] .modal-overlay [style*="color:#0f172a"]:not([style*="background:"]), [data-theme^="escuro"] .modal-overlay [style*="color:#2d2d2d"]:not([style*="background:"]), [data-theme^="escuro"] .modal-overlay [style*="color:#1f1f1f"]:not([style*="background:"]), [data-theme^="escuro"] .modal-overlay [style*="color:#3f3f3f"]:not([style*="background:"]), [data-theme^="escuro"] .modal-overlay [style*="color:#4f4f4f"]:not([style*="background:"]), [data-theme^="escuro"] .modal-overlay [style*="color:#262626"]:not([style*="background:"]), [data-theme^="escuro"] .modal-overlay [style*="color:#404040"]:not([style*="background:"]), [data-theme^="escuro"] .modal-overlay [style*="color:#515151"]:not([style*="background:"]), [data-theme^="escuro"] .modal-overlay [style*="color:#1c1917"]:not([style*="background:"]) { color: #DCE5EF !important; } /* Contra-resgate: painéis com fundo claro inline mantêm textos escuros (e seus filhos com cor inline também, exceto textos brancos). */ [data-theme^="escuro"] .card [style*="background:#f"] [style*="color:#"]:not([style*="color:#fff"]):not([style*="color:#ff"]), [data-theme^="escuro"] .modal-overlay [style*="background:#f"] [style*="color:#"]:not([style*="color:#fff"]):not([style*="color:#ff"]), [data-theme^="escuro"] .card [style*="background:#e"] [style*="color:#"]:not([style*="color:#fff"]):not([style*="color:#ff"]), [data-theme^="escuro"] .modal-overlay [style*="background:#e"] [style*="color:#"]:not([style*="color:#fff"]):not([style*="color:#ff"]), [data-theme^="escuro"] .card [style*="background:#d"] [style*="color:#"]:not([style*="color:#fff"]):not([style*="color:#ff"]), [data-theme^="escuro"] .modal-overlay [style*="background:#d"] [style*="color:#"]:not([style*="color:#fff"]):not([style*="color:#ff"]) { color: #1F2937 !important; } [data-theme^="escuro"] [style*="background:#f"] .form-label, [data-theme^="escuro"] [style*="background:#f"] .form-help { color: #1F2937 !important; } /* Componentes com classes de cor fixa das próprias páginas */ [data-theme^="escuro"] .stat-card .stat-value { color: #F1F5F9 !important; } [data-theme^="escuro"] .stat-card .stat-label { color: #AEBACD !important; } [data-theme^="escuro"] .grupo-item { border-color: #24304A; } [data-theme^="escuro"] .grupo-item:hover { background: #1A2438; border-color: #3B82F6; } [data-theme^="escuro"] .grupo-nome { color: #F1F5F9; } [data-theme^="escuro"] .grupo-jid { color: #B4C0D3; } [data-theme^="escuro"] .dcard { background: #131C2E; border-color: #24304A; } [data-theme^="escuro"] .dcard .dhead { background: #1A2438; border-color: #24304A; } [data-theme^="escuro"] .dhead h3 { color: #F1F5F9; } [data-theme^="escuro"] .frow label { color: #E2E8F0; } [data-theme^="escuro"] .wizard-header h1, [data-theme^="escuro"] .card-wizard h2 { color: #F1F5F9; } [data-theme^="escuro"] .wizard-header p, [data-theme^="escuro"] .card-wizard .subtitulo, [data-theme^="escuro"] .qr-dica, [data-theme^="escuro"] .checklist li { color: #B4C0D3; } [data-theme^="escuro"] .card-wizard, [data-theme^="escuro"] .conexao-card, [data-theme^="escuro"] .qr-box { background: #131C2E; border-color: #24304A; } [data-theme^="escuro"] .step { background: #1E293B; } [data-theme^="escuro"] .step.atual { background: #1A2438; } [data-theme^="escuro"] .step .step-num { background: #334155; color: #CBD5E1; } [data-theme^="escuro"] .btn-cinza { background: #334155; color: #E2E8F0; } [data-theme^="escuro"] .btn-cinza:hover { background: #475569; } [data-theme^="escuro"] .conexao-status-icon.online { background: #065F46; } [data-theme^="escuro"] .conexao-status-icon.offline { background: #7F1D1D; } [data-theme^="escuro"] .conexao-subtitulo { color: #B4C0D3; } [data-theme^="escuro"] .grupo-card:hover { background: #1A2438; } [data-theme^="escuro"] .ganhadores-title { color: #F1F5F9; } [data-theme^="escuro"] .ganhadores-subtitle { color: #B4C0D3; } [data-theme^="escuro"] .ranking-card { background: #131C2E; border-color: #24304A; } [data-theme^="escuro"] .ranking-item { background: #1A2438; border-color: #24304A; } [data-theme^="escuro"] .ranking-name { color: #F1F5F9; } [data-theme^="escuro"] .ranking-meta { color: #B4C0D3; } [data-theme^="escuro"] .ranking-place { color: #F1F5F9; background: #131C2E; border-color: #24304A; } [data-theme^="escuro"] .ganhadores-search { background: #131C2E; border-color: #24304A; } [data-theme^="escuro"] .ganhadores-search label { color: #E2E8F0; }