/* ============================================================== BASE — reset leve, variáveis e tipografia Montserrat Template EstrategiaON (localhost_template) ============================================================== */ /* Paleta e tokens de design */ :root { /* Cores principais */ --color-primary: #4a7fe0; --color-primary-dark: #3b66b8; --color-primary-light: #6b96e8; --color-primary-soft: #eff4fd; --color-success: #10b981; --color-success-soft: #d1fae5; --color-warning: #f59e0b; --color-warning-soft: #fef3c7; --color-danger: #ef4444; --color-danger-soft: #fee2e2; --color-info: #3b82f6; --color-info-soft: #dbeafe; /* Neutros — light mode */ --bg-app: #f8fafc; --bg-surface: #ffffff; --bg-surface-alt: #f1f5f9; --bg-sidebar: #1e293b; --bg-sidebar-hover: #334155; --bg-sidebar-active: #4a7fe0; --bg-topbar: #ffffff; --text-primary: #0f172a; --text-secondary: #475569; --text-muted: #94a3b8; --text-on-primary: #ffffff; --text-on-sidebar: #cbd5e1; --text-on-sidebar-active: #ffffff; --border-color: #e2e8f0; --border-color-strong: #cbd5e1; /* Raios e sombras */ --radius-sm: 4px; --radius: 8px; --radius-lg: 12px; --radius-full: 9999px; --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04); --shadow: 0 2px 6px rgba(15, 23, 42, 0.08); --shadow-lg: 0 8px 24px rgba(15, 23, 42, 0.12); /* Métricas de layout */ --sidebar-width: 260px; --sidebar-collapsed-width: 72px; --topbar-height: 64px; --content-max-width: 1440px; --gutter: 24px; /* Tipografia Montserrat */ --font-sans: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* Transições */ --t-fast: 0.15s ease; --t: 0.25s ease; --t-slow: 0.4s cubic-bezier(0.4, 0, 0.2, 1); } /* Dark mode (toggle por classe no ) */ body.theme-dark { --bg-app: #0f172a; --bg-surface: #1e293b; --bg-surface-alt: #0f172a; --bg-sidebar: #020617; --bg-sidebar-hover: #1e293b; --bg-topbar: #1e293b; --text-primary: #f1f5f9; --text-secondary: #cbd5e1; --text-muted: #64748b; --text-on-sidebar: #94a3b8; --border-color: #334155; --border-color-strong: #475569; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow: 0 2px 6px rgba(0, 0, 0, 0.4); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5); } /* ====== Reset suave ====== */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; height: 100%; } body { font-family: var(--font-sans); font-size: 0.9rem; line-height: 1.5; color: var(--text-primary); background: var(--bg-app); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img, svg, video { display: block; max-width: 100%; } button { font-family: inherit; } a { color: var(--color-primary); text-decoration: none; transition: color var(--t-fast); } a:hover { color: var(--color-primary-dark); } hr { border: 0; border-top: 1px solid var(--border-color); margin: 1.5rem 0; } /* ====== Tipografia ====== */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-sans); color: var(--text-primary); margin: 0 0 0.75rem 0; line-height: 1.25; letter-spacing: -0.015em; } h1 { font-size: 2rem; font-weight: 700; } h2 { font-size: 1.5rem; font-weight: 700; } h3 { font-size: 1.25rem; font-weight: 600; } h4 { font-size: 1.125rem; font-weight: 600; } h5 { font-size: 1rem; font-weight: 600; } h6 { font-size: 0.875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-secondary); } p { margin: 0 0 1rem 0; color: var(--text-secondary); } .text-muted { color: var(--text-muted); } .text-secondary { color: var(--text-secondary); } .text-primary-color { color: var(--color-primary); } .text-success { color: var(--color-success); } .text-warning { color: var(--color-warning); } .text-danger { color: var(--color-danger); } .small { font-size: 0.8rem; } .tiny { font-size: 0.72rem; } .fw-400 { font-weight: 400; } .fw-500 { font-weight: 500; } .fw-600 { font-weight: 600; } .fw-700 { font-weight: 700; } /* ====== Utilitários de espaçamento e layout ====== */ .container-fluid { width: 100%; padding: 0 var(--gutter); } .row-flex { display: flex; gap: var(--gutter); flex-wrap: wrap; } .d-flex { display: flex; } .d-grid { display: grid; } .d-inline-flex { display: inline-flex; } .d-none { display: none; } .align-center { align-items: center; } .justify-between { justify-content: space-between; } .justify-center { justify-content: center; } .justify-end { justify-content: flex-end; } .flex-1 { flex: 1; } .gap-1 { gap: 0.25rem; } .gap-2 { gap: 0.5rem; } .gap-3 { gap: 0.75rem; } .gap-4 { gap: 1rem; } .gap-5 { gap: 1.5rem; } .mb-0 { margin-bottom: 0 !important; } .mb-1 { margin-bottom: 0.25rem; } .mb-2 { margin-bottom: 0.5rem; } .mb-3 { margin-bottom: 1rem; } .mb-4 { margin-bottom: 1.5rem; } .mb-5 { margin-bottom: 2rem; } .mt-0 { margin-top: 0 !important; } .mt-1 { margin-top: 0.25rem; } .mt-2 { margin-top: 0.5rem; } .mt-3 { margin-top: 1rem; } .mt-4 { margin-top: 1.5rem; } .mt-5 { margin-top: 2rem; } /* Scroll customizado (Webkit) */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border-color-strong); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }