/* =================================== COMMERCE FLOW - ESTILO APPLE Design System Inspirado na Apple =================================== */ /* Reset e Variáveis */ :root { /* ── Cor do sistema (accent) ────────────────────────── Padrão: Dourado #f6aa1b. O usuário pode trocar pelo painel de Configurações (settings.js sobrescreve estas variáveis via style inline no ). */ --primary: #f6aa1b; --primary-dark: #d98e0a; --primary-darker: #a86e08; --primary-soft: #fbc75e; --primary-tint: #fdf4e0; --primary-tint-2: #fbe5b8; --primary-rgb: 246, 170, 27; --primary-contrast: #2a1d03; --primary-grad: linear-gradient(135deg, var(--primary), var(--primary-dark)); --secondary: var(--primary-dark); --success: #22c55e; --warning: #FF9500; --danger: #ef4444; /* Neutros (escala quente, combina com o dourado) */ --white: #FFFFFF; --gray-50: #faf9f6; --gray-100: #f0eee8; --gray-200: #dfdcd3; --gray-300: #c9c5ba; --gray-400: #a8a396; --gray-500: #8a8578; --gray-600: #64604f; --gray-700: #4a4638; --gray-800: #33301f; --gray-900: #211e11; /* Tipografia */ --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-weight-light: 300; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-weight-extrabold: 800; /* Sombras (suaves, tom quente) */ --shadow-sm: 0 1px 3px rgba(40, 30, 5, 0.05); --shadow-md: 0 4px 14px rgba(40, 30, 5, 0.08); --shadow-lg: 0 12px 28px rgba(40, 30, 5, 0.12); --shadow-xl: 0 24px 48px rgba(40, 30, 5, 0.16); --shadow-glow: 0 6px 20px rgba(var(--primary-rgb), 0.35); /* Border Radius */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 22px; /* Transições */ --transition-fast: 0.15s ease; --transition-base: 0.25s ease; --transition-slow: 0.35s ease; --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); /* Layout */ --sidebar-width: 260px; --header-height: 64px; --bottom-nav-height: 62px; } /* Reset Global */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: var(--font-family); font-size: 14px; line-height: 1.5; color: var(--gray-900); background: var(--gray-50); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* =================================== TELA DE LOGIN — Dark Luxury + Gold Fundo com orbes animados flutuando =================================== */ .login-screen { position: relative; display: flex; align-items: center; justify-content: center; min-height: 100vh; min-height: 100dvh; background: radial-gradient(1100px 700px at 75% -10%, rgba(var(--primary-rgb), 0.22) 0%, transparent 55%), radial-gradient(900px 600px at -10% 110%, rgba(var(--primary-rgb), 0.14) 0%, transparent 50%), linear-gradient(160deg, #191510 0%, #100d09 55%, #0a0806 100%); padding: 20px; overflow: hidden; } /* Orbes dourados flutuantes (adicionados via .login-bg no HTML) */ .login-bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; } .login-bg .orb { position: absolute; border-radius: 50%; filter: blur(70px); opacity: 0.5; will-change: transform; } .login-bg .orb-1 { width: 420px; height: 420px; background: radial-gradient(circle at 35% 35%, rgba(var(--primary-rgb), 0.85), rgba(var(--primary-rgb), 0.05) 70%); top: -120px; left: -80px; animation: orbFloat1 16s ease-in-out infinite; } .login-bg .orb-2 { width: 360px; height: 360px; background: radial-gradient(circle at 60% 40%, rgba(255, 196, 87, 0.7), rgba(var(--primary-rgb), 0.04) 70%); bottom: -100px; right: -60px; animation: orbFloat2 20s ease-in-out infinite; } .login-bg .orb-3 { width: 260px; height: 260px; background: radial-gradient(circle at 50% 50%, rgba(233, 137, 11, 0.55), transparent 70%); top: 55%; left: 12%; animation: orbFloat3 24s ease-in-out infinite; } @keyframes orbFloat1 { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(70px, 60px) scale(1.12); } 66% { transform: translate(-30px, 100px) scale(0.94); } } @keyframes orbFloat2 { 0%, 100% { transform: translate(0, 0) scale(1); } 30% { transform: translate(-90px, -70px) scale(1.08); } 65% { transform: translate(40px, -110px) scale(0.9); } } @keyframes orbFloat3 { 0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.45; } 50% { transform: translate(120px, -80px) scale(1.25); opacity: 0.65; } } /* Partículas sutis de brilho */ .login-bg::after { content: ''; position: absolute; inset: 0; background-image: radial-gradient(2px 2px at 20% 30%, rgba(255, 215, 130, 0.9), transparent 60%), radial-gradient(1.5px 1.5px at 70% 20%, rgba(255, 225, 160, 0.8), transparent 60%), radial-gradient(2px 2px at 85% 65%, rgba(255, 205, 110, 0.7), transparent 60%), radial-gradient(1.5px 1.5px at 40% 80%, rgba(255, 220, 150, 0.8), transparent 60%), radial-gradient(1px 1px at 55% 45%, rgba(255, 235, 190, 0.9), transparent 60%), radial-gradient(1.5px 1.5px at 10% 60%, rgba(255, 210, 120, 0.6), transparent 60%); animation: sparkle 7s ease-in-out infinite alternate; } @keyframes sparkle { from { opacity: 0.35; transform: translateY(0); } to { opacity: 0.9; transform: translateY(-14px); } } .login-container { position: relative; z-index: 1; background: rgba(255, 255, 255, 0.06); backdrop-filter: blur(22px) saturate(140%); -webkit-backdrop-filter: blur(22px) saturate(140%); border: 1px solid rgba(var(--primary-rgb), 0.28); border-radius: 26px; padding: 46px 40px 38px; width: 100%; max-width: 420px; box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.09); animation: loginIn 0.7s var(--ease-out-expo); } @keyframes loginIn { from { opacity: 0; transform: translateY(36px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } .login-logo { text-align: center; margin-bottom: 12px; } .login-logo i { display: inline-flex; align-items: center; justify-content: center; width: 76px; height: 76px; font-size: 34px; color: var(--primary-contrast); background: var(--primary-grad); border-radius: 22px; margin-bottom: 18px; box-shadow: 0 10px 30px rgba(var(--primary-rgb), 0.45); animation: logoPulse 3.2s ease-in-out infinite; } @keyframes logoPulse { 0%, 100% { box-shadow: 0 10px 30px rgba(var(--primary-rgb), 0.45); transform: translateY(0); } 50% { box-shadow: 0 16px 44px rgba(var(--primary-rgb), 0.65); transform: translateY(-4px); } } .login-logo h1 { font-size: 30px; font-weight: var(--font-weight-extrabold); letter-spacing: -0.02em; background: linear-gradient(100deg, #ffffff 20%, var(--primary-soft) 50%, #ffffff 80%); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: #fff; margin: 0; animation: shineText 5s linear infinite; } @keyframes shineText { to { background-position: 200% center; } } .login-subtitle { text-align: center; color: rgba(255, 255, 255, 0.55); font-size: 14px; margin-bottom: 32px; } /* Inputs do login (tema escuro glass) */ .login-form .form-group label { color: rgba(255, 255, 255, 0.75); } .login-form .form-group input { background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.14); color: #fff; caret-color: var(--primary); } .login-form .form-group input::placeholder { color: rgba(255, 255, 255, 0.35); } .login-form .form-group input:focus { border-color: var(--primary); background: rgba(255, 255, 255, 0.1); box-shadow: 0 0 0 4px rgba(var(--primary-rgb), 0.22); } .login-form .btn-primary { background: var(--primary-grad); color: var(--primary-contrast); font-weight: var(--font-weight-bold); padding: 14px 24px; border-radius: 14px; box-shadow: 0 8px 24px rgba(var(--primary-rgb), 0.4); } .login-form .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(var(--primary-rgb), 0.55); background: var(--primary-grad); } .login-form .btn-primary:active { transform: translateY(0) scale(0.98); } /* Login nunca inverte no tema escuro (já é escuro por design) */ html[data-theme="dark"] .login-screen { filter: invert(1) hue-rotate(180deg); } /* Acessibilidade: reduz movimento */ @media (prefers-reduced-motion: reduce) { .login-bg .orb, .login-bg::after, .login-logo i, .login-logo h1 { animation: none !important; } } .login-form { display: flex; flex-direction: column; gap: 20px; } .form-group { display: flex; flex-direction: column; gap: 8px; } .form-group label { font-size: 13px; font-weight: var(--font-weight-medium); color: var(--gray-700); } .form-group input, .form-group select { width: 100%; padding: 12px 16px; border: 1.5px solid var(--gray-200); border-radius: var(--radius-md); font-size: 15px; font-family: inherit; color: var(--gray-900); background: var(--white); transition: all var(--transition-base); } .form-group input:focus, .form-group select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.1); } .form-group select { cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23636366' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 36px; } .btn { padding: 12px 24px; border: none; border-radius: var(--radius-md); font-size: 15px; font-weight: var(--font-weight-semibold); font-family: inherit; cursor: pointer; transition: all var(--transition-base); display: inline-flex; align-items: center; justify-content: center; gap: 8px; } .btn-primary { background: var(--primary); color: var(--white); } .btn-primary:hover { background: var(--primary-dark); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.3); } .btn-block { width: 100%; margin-top: 8px; } .login-footer { text-align: center; margin-top: 32px; font-size: 12px; color: rgba(255, 255, 255, 0.4); } /* =================================== LAYOUT PRINCIPAL =================================== */ .app-container { display: flex; height: 100vh; overflow: hidden; } /* Sidebar */ .sidebar { width: var(--sidebar-width); background: var(--white); border-right: 1px solid var(--gray-200); display: flex; flex-direction: column; transition: transform var(--transition-base); z-index: 1000; } .sidebar-header { height: var(--header-height); padding: 0 20px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--gray-200); } .logo { display: flex; align-items: center; gap: 12px; font-size: 20px; font-weight: var(--font-weight-bold); color: var(--gray-900); } .logo i { font-size: 24px; color: var(--primary); } .sidebar-toggle { display: none; width: 32px; height: 32px; border: none; background: transparent; cursor: pointer; color: var(--gray-600); border-radius: var(--radius-sm); transition: all var(--transition-fast); } .sidebar-toggle:hover { background: var(--gray-100); } /* Menu */ .sidebar-menu { flex: 1; overflow-y: auto; padding: 20px 12px; } .sidebar-menu::-webkit-scrollbar { width: 6px; } .sidebar-menu::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: 3px; } .menu-section { margin-bottom: 28px; } .menu-label { font-size: 11px; font-weight: var(--font-weight-semibold); color: var(--gray-500); text-transform: uppercase; letter-spacing: 0.5px; padding: 0 12px; margin-bottom: 8px; } .menu-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; margin: 2px 0; border-radius: var(--radius-md); color: var(--gray-700); text-decoration: none; font-weight: var(--font-weight-medium); transition: all var(--transition-fast); cursor: pointer; } .menu-item i { width: 20px; font-size: 16px; color: var(--gray-500); } .menu-item:hover { background: var(--gray-100); color: var(--gray-900); } .menu-item.active { background: var(--primary); color: var(--white); } .menu-item.active i { color: var(--white); } /* User Footer */ .sidebar-footer { padding: 16px; border-top: 1px solid var(--gray-200); display: flex; align-items: center; justify-content: space-between; gap: 12px; } .user-info { display: flex; align-items: center; gap: 12px; flex: 1; } .user-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--gray-100); display: flex; align-items: center; justify-content: center; } .user-avatar i { font-size: 24px; color: var(--gray-500); } .user-details { flex: 1; } .user-name { font-size: 14px; font-weight: var(--font-weight-semibold); color: var(--gray-900); } .user-role { font-size: 12px; color: var(--gray-500); } .btn-logout { width: 36px; height: 36px; border: none; background: var(--gray-100); border-radius: var(--radius-md); cursor: pointer; color: var(--gray-600); transition: all var(--transition-fast); } .btn-logout:hover { background: var(--danger); color: var(--white); } /* Main Content */ .main-content { flex: 1; display: flex; flex-direction: column; overflow: hidden; } .top-header { height: var(--header-height); background: var(--white); border-bottom: 1px solid var(--gray-200); padding: 0 32px; display: flex; align-items: center; justify-content: space-between; } .header-left { display: flex; align-items: center; gap: 16px; } .mobile-menu-toggle { display: none; width: 40px; height: 40px; border: none; background: transparent; cursor: pointer; color: var(--gray-700); font-size: 20px; } #pageTitle { font-size: 24px; font-weight: var(--font-weight-bold); color: var(--gray-900); } .header-right { display: flex; align-items: center; gap: 12px; } .header-icon { position: relative; width: 40px; height: 40px; border: none; background: var(--gray-100); border-radius: var(--radius-md); cursor: pointer; color: var(--gray-700); font-size: 16px; transition: all var(--transition-fast); } .header-icon:hover { background: var(--gray-200); } .header-icon .badge { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; background: var(--danger); color: var(--white); border-radius: 9px; font-size: 11px; font-weight: var(--font-weight-bold); display: flex; align-items: center; justify-content: center; padding: 0 4px; } /* Content Area */ .content-area { flex: 1; overflow-y: auto; padding: 32px; background: var(--gray-50); } .content-area::-webkit-scrollbar { width: 8px; } .content-area::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: 4px; } /* =================================== RESPONSIVE =================================== */ @media (max-width: 1024px) { :root { --sidebar-width: 220px; } } @media (max-width: 768px) { .sidebar { position: fixed; left: 0; top: 0; height: 100vh; transform: translateX(-100%); box-shadow: var(--shadow-xl); } .sidebar.active { transform: translateX(0); } .sidebar-toggle { display: flex; align-items: center; justify-content: center; } .mobile-menu-toggle { display: block; } .content-area { padding: 0; } .top-header { padding: 0 16px; } } /* =================================== UTILITY CLASSES =================================== */ .text-center { text-align: center; } .text-right { text-align: right; } .text-muted { color: var(--gray-500); } .text-primary { color: var(--primary); } .text-success { color: var(--success); } .text-warning { color: var(--warning); } .text-danger { color: var(--danger); } .mt-1 { margin-top: 8px; } .mt-2 { margin-top: 16px; } .mt-3 { margin-top: 24px; } .mb-1 { margin-bottom: 8px; } .mb-2 { margin-bottom: 16px; } .mb-3 { margin-bottom: 24px; }