/* * MH2EDU — Sistema de temas centralizado * Modos: dark | light | auto (via data-theme no , controlado por theme.js) */ /* ========== TEMA ESCURO (padrão do sistema) ========== */ :root, [data-theme="dark"] { --color-bg: #1a1a2e; --color-background: #1a1a2e; --color-surface: #22243a; --color-surface-elevated: #1a1f3a; --color-input-bg: #16213e; --color-sidebar-bg: #10101a; --color-dropdown-bg: #22253b; --color-header-bg: #1a1a2e; --color-text: #e0e0e0; --color-text-inverse: #ffffff; --color-muted: #a0a0a0; --color-muted-soft: #c0c0c0; --color-link: #a8cfff; --color-link-hover: #6fb7ff; --color-border: rgba(255, 255, 255, 0.05); --color-border-strong: #0f3460; --color-border-hover: rgba(255, 255, 255, 0.1); --color-primary: #00aaff; --color-primary-dark: #0080cc; --color-primary-alt: #0077cc; --color-secondary: #dbe7f3; --color-danger: #e63946; --color-danger-dark: #c23030; --color-success: #2a9d8f; --color-success-dark: #1a7a6e; --color-warning: #f59e0b; --color-overlay: rgba(0, 0, 0, 0.6); --color-overlay-heavy: rgba(0, 0, 0, 0.9); --color-hover-bg: rgba(255, 255, 255, 0.05); --color-active-bg: rgba(59, 130, 246, 0.2); /* Shell / sidebar (iguais ao legado logado) */ --color-layout-shell: #22253b; --color-sidebar-text: #e0e0e0; --color-sidebar-muted: #b6c2d6; --color-sidebar-icon: #6fb7ff; --color-sidebar-section: #a8cfff; --color-menu-hover-bg: #3a4a8f; --color-nav-muted: #c0c0c0; --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-header: 0 2px 8px rgba(0, 0, 0, 0.5); --color-card-bg: var(--color-surface); --color-card-border: rgba(0, 0, 0, 0.12); --color-section-header-text: #ffffff; --color-table-header: var(--color-input-bg); --color-table-row-hover: rgba(255, 255, 255, 0.03); --color-modal-bg: var(--color-surface-elevated); --login-page-bg: linear-gradient(135deg, var(--color-bg) 0%, var(--color-input-bg) 50%, var(--color-border-strong) 100%); --login-card-bg: rgba(16, 16, 26, 0.72); --login-card-border: rgba(255, 255, 255, 0.1); --login-card-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); --login-form-panel-bg: rgba(0, 0, 0, 0.2); --login-detalhes-bg: rgba(0, 0, 0, 0.1); --login-heading-color: #ffffff; --login-panel-divider: rgba(255, 255, 255, 0.1); --login-unidade-bg: rgba(255, 255, 255, 0.05); --login-unidade-border: var(--color-input-bg); --login-action-bg: rgba(255, 255, 255, 0.05); --login-action-border: rgba(255, 255, 255, 0.1); --login-action-color: #4a90e2; } /* ========== TEMA CLARO ========== */ [data-theme="light"] { --color-bg: #f0f2f5; --color-background: #f0f2f5; --color-surface: #ffffff; --color-surface-elevated: #ffffff; --color-input-bg: #f8f9fb; --color-sidebar-bg: #ffffff; --color-dropdown-bg: #ffffff; --color-header-bg: #ffffff; --color-text: #1a1a2e; --color-text-inverse: #ffffff; --color-muted: #6b7280; --color-muted-soft: #9ca3af; --color-link: #0077cc; --color-link-hover: #005fa3; --color-border: rgba(0, 0, 0, 0.08); --color-border-strong: #d1d5db; --color-border-hover: rgba(0, 0, 0, 0.15); --color-primary: #0077cc; --color-primary-dark: #005fa3; --color-primary-alt: #00aaff; --color-secondary: #374151; --color-danger: #dc2626; --color-danger-dark: #b91c1c; --color-success: #059669; --color-success-dark: #047857; --color-warning: #d97706; --color-overlay: rgba(0, 0, 0, 0.35); --color-overlay-heavy: rgba(0, 0, 0, 0.55); --color-hover-bg: rgba(0, 0, 0, 0.04); --color-active-bg: rgba(0, 119, 204, 0.12); /* Shell / sidebar (iguais ao legado logado) */ --color-layout-shell: #e4e7ec; --color-sidebar-text: #1a1a2e; --color-sidebar-muted: #4b5563; --color-sidebar-icon: #0077cc; --color-sidebar-section: #005fa3; --color-menu-hover-bg: rgba(0, 119, 204, 0.12); --color-nav-muted: #4b5563; --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-header: 0 1px 4px rgba(0, 0, 0, 0.08); --color-card-bg: var(--color-surface); --color-card-border: rgba(0, 0, 0, 0.18); --color-section-header-text: #ffffff; --color-table-header: #f3f4f6; --color-table-row-hover: rgba(0, 0, 0, 0.03); --color-modal-bg: var(--color-surface); --login-page-bg: linear-gradient(160deg, #dbeafe 0%, #eff6ff 35%, #f8fafc 70%, #ffffff 100%); --login-card-bg: #ffffff; --login-card-border: rgba(0, 119, 204, 0.14); --login-card-shadow: 0 12px 40px rgba(0, 77, 153, 0.1), 0 2px 8px rgba(15, 23, 42, 0.06); --login-form-panel-bg: #f8fafc; --login-detalhes-bg: #f1f5f9; --login-heading-color: #0f172a; --login-panel-divider: #e2e8f0; --login-unidade-bg: #ffffff; --login-unidade-border: #e2e8f0; --login-action-bg: #ffffff; --login-action-border: #cbd5e1; --login-action-color: #0077cc; } /* Formulários no tema claro — labels/campos pretos; títulos dos cards permanecem brancos */ [data-theme="light"] .section-card-body, [data-theme="light"] .section-card-body .form-label, [data-theme="light"] .section-card-body .form-check-label, [data-theme="light"] .section-card-body .form-control, [data-theme="light"] .section-card-body .form-text, [data-theme="light"] .section-card-body label { color: var(--color-text); } [data-theme="light"] .form-control::placeholder { color: var(--color-muted); opacity: 0.9; } [data-theme="light"] select.form-control { color: var(--color-text); } /* Troca de tema desativada (produção) */ html.mh2-theme-switching-off .theme-toggle-wrap, html.mh2-theme-switching-off .login-theme-bar, html.mh2-theme-switching-off .base-theme-switcher { display: none !important; } /* ========== Interruptor de tema (header) ========== */ .theme-toggle-wrap { display: inline-flex; align-items: center; gap: 6px; margin-right: 6px; cursor: pointer; user-select: none; padding: 4px 6px; border-radius: 20px; background: var(--color-hover-bg); border: 1px solid var(--color-border); } .theme-toggle-wrap.is-auto { border-color: var(--color-primary); box-shadow: 0 0 0 1px rgba(0, 170, 255, 0.15); } .theme-toggle-icon { font-size: 0.75rem; color: var(--color-muted); width: 14px; text-align: center; transition: color 0.15s; } .theme-toggle-wrap.is-auto .theme-toggle-icon { color: var(--color-primary); } .theme-toggle-input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); } .theme-toggle-slider { position: relative; display: inline-block; width: 40px; height: 22px; background: var(--color-input-bg); border: 1px solid var(--color-border-strong); border-radius: 22px; transition: background 0.2s, border-color 0.2s; flex-shrink: 0; } .theme-toggle-slider::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--color-primary); transition: transform 0.2s ease; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); } .theme-toggle-input:checked + .theme-toggle-slider::after { transform: translateX(18px); } .theme-toggle-input:checked + .theme-toggle-slider { background: var(--color-active-bg); border-color: var(--color-primary); } /* Legado: botões de 3 opções (login) */ .login-theme-bar { position: fixed; top: max(12px, env(safe-area-inset-top, 0px)); right: max(12px, env(safe-area-inset-right, 0px)); z-index: 10001; pointer-events: auto; } .login-theme-bar .base-theme-switcher, .base-theme-switcher { display: inline-flex; align-items: center; gap: 2px; background: var(--color-surface-elevated); border: 1px solid var(--color-border-strong); border-radius: 8px; padding: 2px; margin-right: 4px; box-shadow: var(--shadow-md); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .base-theme-switcher button { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 28px; border: none; border-radius: 6px; background: transparent; color: var(--color-muted); cursor: pointer; font-size: 0.85rem; transition: background 0.15s, color 0.15s; } .base-theme-switcher button:hover { color: var(--color-text); background: var(--color-hover-bg); } .base-theme-switcher button.active { color: var(--color-primary); background: var(--color-active-bg); } /* Transição suave ao trocar tema */ html.theme-transition, html.theme-transition *, html.theme-transition *::before, html.theme-transition *::after { transition: background-color 0.2s ease, color 0.15s ease, border-color 0.2s ease, box-shadow 0.2s ease !important; }