/* ================================================ BBA ENGENHARIA - SISTEMA DE TEMAS ================================================ COMO USAR: 1. Inclua este arquivo em todas as páginas: 2. Para DARK MODE: adicione class="theme-dark" no 3. Para LIGHT MODE: adicione class="theme-light" no Exemplo: ou ================================================ */ /* ========== TEMA DARK (Padrão) ========== */ .theme-dark { --bg-root: #020617; --bg-body: #020617; --bg-card: rgba(15, 23, 42, 0.95); --bg-card-solid: #0f172a; --bg-input: rgba(15, 23, 42, 0.8); --bg-hover: rgba(15, 23, 42, 0.7); --bg-sidebar: rgba(15, 23, 42, 0.98); --border-soft: rgba(255, 255, 255, 0.06); --border-hover: rgba(59, 130, 246, 0.3); --border-input: rgba(255, 255, 255, 0.12); --txt-main: #e5e7eb; --txt-title: #ffffff; --txt-muted: #94a3b8; --txt-soft: #64748b; --accent-blue: #3b82f6; --accent-cyan: #22d3ee; --accent-green: #22c55e; --accent-yellow: #eab308; --accent-red: #ef4444; --accent-purple: #a855f7; --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.5); --shadow-card: 0 16px 48px rgba(0, 0, 0, 0.4); --shadow-glow: 0 0 30px rgba(59, 130, 246, 0.15); --gradient-hero: linear-gradient(145deg, rgba(30, 64, 175, 0.08) 0%, var(--bg-root) 30%); --gradient-sidebar: linear-gradient(180deg, rgba(30, 64, 175, 0.4) 0%, var(--bg-root) 70%); --gradient-radial: radial-gradient(ellipse at top right, rgba(59, 130, 246, 0.06), transparent 50%); --btn-primary-bg: linear-gradient(135deg, var(--accent-green), var(--accent-cyan)); --btn-primary-text: #020617; --btn-primary-shadow: 0 4px 20px rgba(34, 197, 94, 0.3); --btn-primary-shadow-hover: 0 12px 35px rgba(34, 197, 94, 0.45); --scrollbar-track: rgba(15, 23, 42, 0.5); --scrollbar-thumb: rgba(59, 130, 246, 0.3); } /* ========== TEMA LIGHT ========== */ .theme-light { --bg-root: #f8fafc; --bg-body: #f1f5f9; --bg-card: rgba(255, 255, 255, 0.95); --bg-card-solid: #ffffff; --bg-input: rgba(255, 255, 255, 0.9); --bg-hover: rgba(241, 245, 249, 0.9); --bg-sidebar: rgba(255, 255, 255, 0.98); --border-soft: rgba(0, 0, 0, 0.08); --border-hover: rgba(59, 130, 246, 0.4); --border-input: rgba(0, 0, 0, 0.15); --txt-main: #334155; --txt-title: #0f172a; --txt-muted: #64748b; --txt-soft: #94a3b8; --accent-blue: #2563eb; --accent-cyan: #0891b2; --accent-green: #16a34a; --accent-yellow: #ca8a04; --accent-red: #dc2626; --accent-purple: #9333ea; --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.1); --shadow-card: 0 16px 48px rgba(0, 0, 0, 0.08); --shadow-glow: 0 0 30px rgba(59, 130, 246, 0.1); --gradient-hero: linear-gradient(145deg, rgba(59, 130, 246, 0.05) 0%, var(--bg-root) 30%); --gradient-sidebar: linear-gradient(180deg, rgba(59, 130, 246, 0.08) 0%, var(--bg-root) 70%); --gradient-radial: radial-gradient(ellipse at top right, rgba(59, 130, 246, 0.04), transparent 50%); --btn-primary-bg: linear-gradient(135deg, var(--accent-green), var(--accent-cyan)); --btn-primary-text: #ffffff; --btn-primary-shadow: 0 4px 20px rgba(22, 163, 74, 0.25); --btn-primary-shadow-hover: 0 12px 35px rgba(22, 163, 74, 0.35); --scrollbar-track: rgba(241, 245, 249, 0.8); --scrollbar-thumb: rgba(59, 130, 246, 0.4); } /* ========== VARIÁVEIS FIXAS (não mudam com tema) ========== */ :root { --radius-lg: 20px; --radius-md: 14px; --radius-sm: 10px; --radius-full: 50px; --transition-fast: 0.2s ease; --transition-normal: 0.25s ease; --transition-slow: 0.3s ease; } /* ========== ESTILOS BASE ========== */ * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: 'Inter', system-ui, -apple-system, sans-serif; background: var(--bg-body); color: var(--txt-main); min-height: 100vh; line-height: 1.6; transition: background var(--transition-normal), color var(--transition-normal); } /* ========== SCROLLBAR ESTILIZADA ========== */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: var(--scrollbar-track); } ::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--accent-blue); } /* ========== BOTÃO DE TOGGLE DE TEMA ========== */ .theme-toggle { position: fixed; bottom: 24px; right: 24px; width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--border-soft); background: var(--bg-card); color: var(--txt-main); cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-lg); transition: all var(--transition-normal); z-index: 9999; } .theme-toggle:hover { transform: scale(1.1); border-color: var(--accent-blue); box-shadow: var(--shadow-glow); } .theme-toggle svg { width: 22px; height: 22px; } .theme-toggle .icon-sun { display: none; } .theme-toggle .icon-moon { display: block; } .theme-light .theme-toggle .icon-sun { display: block; } .theme-light .theme-toggle .icon-moon { display: none; } /* ========== UTILITÁRIOS DE COR ========== */ .text-title { color: var(--txt-title); } .text-main { color: var(--txt-main); } .text-muted { color: var(--txt-muted); } .text-soft { color: var(--txt-soft); } .text-blue { color: var(--accent-blue); } .text-cyan { color: var(--accent-cyan); } .text-green { color: var(--accent-green); } .text-yellow { color: var(--accent-yellow); } .text-red { color: var(--accent-red); } .text-purple { color: var(--accent-purple); } .bg-card { background: var(--bg-card); } .bg-root { background: var(--bg-root); } /* ========== STATUS BADGES ========== */ .status-ok { background: rgba(34, 197, 94, 0.12); color: var(--accent-green); border: 1px solid rgba(34, 197, 94, 0.25); } .status-pending { background: rgba(234, 179, 8, 0.12); color: var(--accent-yellow); border: 1px solid rgba(234, 179, 8, 0.25); } .status-error { background: rgba(239, 68, 68, 0.12); color: var(--accent-red); border: 1px solid rgba(239, 68, 68, 0.25); } .status-info { background: rgba(59, 130, 246, 0.12); color: var(--accent-blue); border: 1px solid rgba(59, 130, 246, 0.25); } /* ========== ANIMAÇÕES ========== */ @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .animate-fade-in { animation: fadeIn 0.4s ease forwards; } /* ========== AJUSTES ESPECÍFICOS PARA LIGHT ========== */ .theme-light .hero-card, .theme-light .service-card, .theme-light .obra-card, .theme-light .port-card, .theme-light .card, .theme-light .metric-card, .theme-light .client-info-item, .theme-light .doc-row, .theme-light .doc-item, .theme-light .calendar-item, .theme-light .calendar-detail, .theme-light .substep-item, .theme-light .contato-item, .theme-light .hero-metric { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); } .theme-light .hero-card:hover, .theme-light .service-card:hover, .theme-light .obra-card:hover, .theme-light .port-card:hover, .theme-light .card:hover, .theme-light .metric-card:hover { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1); } /* Ajuste para ícones no light mode */ .theme-light .hero-metric-icon, .theme-light .service-icon, .theme-light .obra-icon, .theme-light .port-icon, .theme-light .contato-item-icon, .theme-light .metric-card-icon { background: rgba(59, 130, 246, 0.08); } /* ========== MEDIA QUERIES ========== */ @media (max-width: 768px) { .theme-toggle { bottom: 16px; right: 16px; width: 44px; height: 44px; } .theme-toggle svg { width: 18px; height: 18px; } }