/* =========================== TEMA CLARO (opcional) Ativado quando A troca é feita pelo assets/theme.js (botão no cabeçalho). =========================== */ html[data-theme="light"] { /* Cores de destaque legíveis sobre fundo claro */ --neon-cyan: #0b5e8a; --neon-purple: #6d28d9; --neon-pink: #be185d; --neon-green: #15803d; --neon-blue: #1d4ed8; --neon-yellow: #a16207; --neon-orange: #c2410c; --neon-amber: #b45309; --primary: #0284c7; --primary-hover: #0369a1; --primary-dark: #075985; --primary-glow: rgba(2, 132, 199, 0.18); --secondary: #0e7490; --secondary-hover: #155e75; --secondary-dark: #164e63; --secondary-glow: rgba(14, 116, 144, 0.18); --bg-dark: #f5f7fa; --bg-darker: #eef2f6; --bg-card: #ffffff; --bg-glass: rgba(15, 23, 42, 0.04); --bg-glass-hover: rgba(15, 23, 42, 0.08); --text-primary: #1e293b; --text-secondary: #475569; --text-muted: #64748b; --border-neon: #e2e8f0; --border-neon-cyan: #dbeafe; --border-glass: #e5e7eb; --glow-primary: none; --glow-secondary: none; --glow-card: 0 1px 3px rgba(15, 23, 42, 0.08); /* Tipografia neutra (sem fonte futurista) */ --font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-family-display: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } /* Base */ html[data-theme="light"] body { background: var(--bg-dark); color: var(--text-primary); } html[data-theme="light"] body::before { display: none; } /* Header e navegação */ html[data-theme="light"] header { box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08); } html[data-theme="light"] nav a { background: #f8fafc; border-color: #e2e8f0; } html[data-theme="light"] nav a::before { display: none; } html[data-theme="light"] nav a:hover { background: #e0f2fe; border-color: #7dd3fc; color: #075985; box-shadow: none; } html[data-theme="light"] nav a.active { background: #e0f2fe; border-color: #0284c7; color: #075985; box-shadow: none; } html[data-theme="light"] .logout-button, html[data-theme="light"] .sidebar-logout { background: #fef2f2; border-color: #fecaca; color: #dc2626; } html[data-theme="light"] .logout-button:hover, html[data-theme="light"] .sidebar-logout:hover { background: #fee2e2; box-shadow: none; } /* Sidebar */ html[data-theme="light"] .sidebar::before { display: none; } html[data-theme="light"] .sidebar-nav-item.active { background: #e0f2fe; color: #075985; box-shadow: none; } /* Cards e seções */ html[data-theme="light"] .card::before, html[data-theme="light"] section::before { display: none; } html[data-theme="light"] .card:hover, html[data-theme="light"] section:hover { transform: none; border-color: var(--border-neon); box-shadow: var(--glow-card); } html[data-theme="light"] .card-header i, html[data-theme="light"] section h2 i { filter: none; } /* Tabelas */ html[data-theme="light"] thead { background: #f8f9fa; } html[data-theme="light"] th { color: #475569; border-bottom-color: #e2e8f0; } html[data-theme="light"] td { color: #334155; } html[data-theme="light"] tbody tr:hover { background: #f1f5f9; transform: none; } html[data-theme="light"] tbody tr:hover td { color: var(--text-primary); font-weight: 500; } /* Botões */ html[data-theme="light"] .btn-primary, html[data-theme="light"] button[type="submit"] { background: var(--primary); border-color: var(--primary); color: #ffffff; box-shadow: none; } html[data-theme="light"] .btn-primary:hover, html[data-theme="light"] button[type="submit"]:hover { background: var(--primary-hover); border-color: var(--primary-hover); box-shadow: 0 2px 8px rgba(2, 132, 199, 0.3); transform: none; } html[data-theme="light"] .btn-secondary { border-color: var(--primary); color: var(--primary); } html[data-theme="light"] .btn-secondary:hover { background: #e0f2fe; box-shadow: none; } html[data-theme="light"] .btn-success { background: #16a34a; border-color: #16a34a; color: #ffffff; box-shadow: none; } html[data-theme="light"] .btn-danger { background: #dc2626; border-color: #dc2626; color: #ffffff; box-shadow: none; } /* Formulários */ html[data-theme="light"] label { color: #334155; } html[data-theme="light"] input, html[data-theme="light"] select, html[data-theme="light"] textarea { background: #ffffff; border-color: #d1d5db; color: #1f2937; } html[data-theme="light"] input:focus, html[data-theme="light"] select:focus, html[data-theme="light"] textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15); background: #ffffff; } html[data-theme="light"] select { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23475569' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m6 8 4 4 4-4'/%3e%3c/svg%3e"); } html[data-theme="light"] select option { background: #ffffff; color: #1f2937; } /* Badges */ html[data-theme="light"] .badge-success { background: #dcfce7; border-color: #86efac; color: #166534; box-shadow: none; } html[data-theme="light"] .badge-warning { background: #fef9c3; border-color: #fde047; color: #854d0e; box-shadow: none; } html[data-theme="light"] .badge-danger { background: #fee2e2; border-color: #fca5a5; color: #b91c1c; box-shadow: none; } html[data-theme="light"] .badge-info { background: #e0f2fe; border-color: #7dd3fc; color: #075985; box-shadow: none; } /* Modais */ html[data-theme="light"] .modal { background: rgba(15, 23, 42, 0.45); } /* Stats */ html[data-theme="light"] .stat-card:hover { transform: none; box-shadow: var(--glow-card); } html[data-theme="light"] .stat-item:hover { box-shadow: 0 1px 4px rgba(15, 23, 42, 0.12); } /* Alertas (dashboard) */ html[data-theme="light"] .alert-item { background: #fffbeb; border-color: #fde68a; border-left-color: #d97706; } html[data-theme="light"] .alert-item:hover { background: #fef3c7; transform: none; box-shadow: none; } html[data-theme="light"] .alert-item i { color: #d97706; } html[data-theme="light"] .alert-item.critical { background: #fef2f2; border-color: #fecaca; border-left-color: #dc2626; } html[data-theme="light"] .alert-item.critical i { color: #dc2626; } html[data-theme="light"] .activity-item:hover { transform: none; } html[data-theme="light"] .activity-description code { background: #ede9fe; } /* Notificações (toast + sino) */ html[data-theme="light"] .notification.error { border-left-color: #dc2626; } html[data-theme="light"] .notif-dropdown { background: #ffffff; border-color: #e2e8f0; box-shadow: 0 10px 30px rgba(15, 23, 42, 0.15); } html[data-theme="light"] .notif-dropdown .title { color: #0b5e8a; border-bottom-color: #e5e7eb; } html[data-theme="light"] .notif-dropdown .item { color: #475569; border-bottom-color: #f1f5f9; } html[data-theme="light"] .notif-dropdown .item:hover { background: #f8fafc; } html[data-theme="light"] .notif-actions { background: #f8fafc; border-top-color: #e5e7eb; } /* Modal de pendências */ html[data-theme="light"] .pending-alert-content { background: #ffffff; border-color: #f59e0b; box-shadow: 0 10px 40px rgba(15, 23, 42, 0.2); } html[data-theme="light"] .pending-alert-title { color: #1e293b; } html[data-theme="light"] .pending-alert-text { color: #475569; } html[data-theme="light"] .pending-alert-icon { color: #d97706; } html[data-theme="light"] .pending-alert-btn-primary { background: #f59e0b; color: #ffffff; box-shadow: none; } html[data-theme="light"] .pending-alert-btn-secondary { border-color: #cbd5e1; color: #334155; } /* Login */ html[data-theme="light"] .login-page::before { display: none; } html[data-theme="light"] .tab-switcher { background: #f1f5f9; } html[data-theme="light"] .login-error { color: #b91c1c; background: #fee2e2; border-color: #fecaca; } /* Scrollbar */ html[data-theme="light"] ::-webkit-scrollbar-track { background: #eef2f6; } html[data-theme="light"] ::-webkit-scrollbar-thumb { background: #cbd5e1; } html[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: #94a3b8; } /* =========================== BOTÃO DE ALTERNÂNCIA DE TEMA (estilizado para ambos os temas) =========================== */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 8px; background: rgba(255, 255, 255, 0.08); color: #ffd75e; cursor: pointer; font-size: 1.15rem; line-height: 1; text-transform: none; letter-spacing: 0; transition: background 0.2s, border-color 0.2s; } .theme-toggle:hover { background: rgba(255, 255, 255, 0.18); } html[data-theme="light"] .theme-toggle { border-color: #d7dee8; background: #ffffff; color: #475569; box-shadow: none; } html[data-theme="light"] .theme-toggle:hover { background: #f1f5f9; } .theme-toggle-floating { position: fixed; bottom: 1rem; right: 1rem; z-index: 9999; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); }