/* ============================================================ TEMA ESCURO — padrão de todo o sistema (Login + todas as telas) Referência: mockup do Painel do Coordenador (glassmorphism escuro) Cor da marca (vermelho): #E0311B — extraída de docs/unialfa.svg Aplicado quando tem a classe 'tema-escuro' (sempre ligada). ============================================================ */ body.tema-escuro { /* Paleta escura (override das variáveis — propaga para os componentes) */ --azul-profundo: #0B2545; /* mantido escuro: chips pastel + primary-hover */ --azul-ativo: #3b82f6; /* textos de destaque (integração, mini-alunos) */ --vermelho-accent: #E0311B; --dourado-accent: #fbbf24; --off-white: #0f172a; --primary: #3b82f6; --primary-hover: #2563eb; --primary-bg: rgba(59, 130, 246, 0.16); --danger: #E0311B; --warning: #fbbf24; --accent: #E0311B; --fundo: #0f172a; --bg-gradient: linear-gradient(135deg, #0f172a 0%, #1e3a8a 45%, #E0311B 100%); --glass-bg: rgba(15, 23, 42, 0.55); --glass-bg-hover: rgba(30, 41, 59, 0.75); --glass-border: 1px solid rgba(255, 255, 255, 0.12); --glass-shadow: rgba(0, 0, 0, 0.5); --glass-blur: blur(16px); /* Tokens de superfície/texto (tema escuro) */ --surface: rgba(30, 41, 59, 0.72); --surface-alt: rgba(255, 255, 255, 0.05); --surface-hover: rgba(255, 255, 255, 0.10); --border: rgba(255, 255, 255, 0.14); --border-soft: rgba(255, 255, 255, 0.10); --texto: #e2e8f0; --texto-soft: #cbd5e1; --texto-muted: #94a3b8; --texto-faint: #64748b; --branco: #ffffff; --font-family: 'Plus Jakarta Sans', 'Outfit', 'Segoe UI', Roboto, Arial, sans-serif; color: var(--texto); } /* Cabeçalhos e títulos */ body.tema-escuro h1, body.tema-escuro h2, body.tema-escuro h3, body.tema-escuro h4 { color: #f1f5f9; } /* Sidebar / navegação */ body.tema-escuro .app-sidebar { background: rgba(15, 23, 42, 0.72); border: 1px solid rgba(255, 255, 255, 0.10); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45); } body.tema-escuro .app-logo { color: #f1f5f9; } body.tema-escuro .nav-btn { color: #cbd5e1; } body.tema-escuro .nav-btn:hover, body.tema-escuro .nav-btn.active { background: var(--primary-bg); color: #ffffff; } /* Botão secundário: ganha contorno no escuro */ body.tema-escuro .btn-secundario { background: var(--surface-hover); color: var(--texto); border: 1px solid var(--border); } body.tema-escuro .btn-secundario:hover { background: rgba(255, 255, 255, 0.18); } /* Form controls: o browser usa `fieldtext` (preto) por padrao em input/select/ textarea — forçamos a cor do tema (whitesmoke) para leitura sobre o vidro. */ body.tema-escuro input, body.tema-escuro select, body.tema-escuro textarea { color: var(--texto); caret-color: var(--primary); } body.tema-escuro .input::placeholder, body.tema-escuro .textarea::placeholder { color: var(--texto-faint); opacity: 1; } /* Lista de opções dos selects em fundo escuro */ body.tema-escuro select option { background: #0f172a; color: #e2e8f0; } /* Autofill do Chrome: mantém fundo escuro + texto claro */ body.tema-escuro input:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px rgba(15, 23, 42, 0.9) inset; -webkit-text-fill-color: var(--texto); caret-color: var(--primary); } /* Login */ body.tema-escuro .login-page { background: transparent; } body.tema-escuro .login-card { background: var(--glass-bg); border: var(--glass-border); box-shadow: 0 8px 32px 0 var(--glass-shadow); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); } body.tema-escuro .login-titulo { color: #f1f5f9; } /* Dashboard — valores de status ganham brilho no fundo escuro */ body.tema-escuro .dash-card.alerta .dash-card-valor { color: #fbbf24; } body.tema-escuro .dash-card-ok .dash-card-valor { color: #34d399; } body.tema-escuro .dash-card-alerta .dash-card-valor { color: #f87171; } body.tema-escuro .dash-card-info .dash-card-valor { color: #60a5fa; } body.tema-escuro .dash-badge-ok { color: #6ee7b7; } body.tema-escuro .dash-badge-alerta { color: #fca5a5; } /* Trilha — chips de estado continuam pastel (leitura clara sobre chip claro): metadados e pills internos preservam o par claro para nao sumirem. */ body.tema-escuro .disc-card .disc-meta { color: #64748b; } body.tema-escuro .disc-mini-card .mini-status, body.tema-escuro .disc-mini-card .mini-carga { background: #e2e8f0; color: #64748b; } body.tema-escuro .disc-mini-card .mini-alunos { background: rgba(16, 78, 139, 0.12); color: #104E8B; }