/* ============================================================================ Synaptix CRM — Variables globales y estilos base ============================================================================ */ :root { /* Brand */ --color-primary: #1E3A5F; --color-accent: #2D7DD2; --color-accent-hover: #1A6BC1; /* Icon rail (navegación estilo Bitrix24 — riel angosto de íconos, ver sidebar.php) */ --sidebar-bg: #0F1923; --sidebar-width: 84px; --sidebar-text: #94A3B8; --sidebar-active: #2D7DD2; --group-subnav-height: 48px; /* Surface */ --bg-main: #F5F7FA; --bg-card: #FFFFFF; --bg-hover: #EFF6FF; /* Text */ --text-primary: #1E293B; --text-secondary: #64748B; --text-muted: #94A3B8; /* Status */ --color-success: #16A34A; --color-warning: #EA580C; --color-danger: #DC2626; --color-purple: #7C3AED; --color-teal: #0D9488; /* UI */ --border-color: #E2E8F0; --shadow-sm: 0 1px 3px rgba(0,0,0,.08); --shadow-md: 0 4px 12px rgba(0,0,0,.10); --shadow-lg: 0 8px 30px rgba(0,0,0,.14); --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; /* Typography */ --font-display: 'Sora', sans-serif; --font-body: 'Inter', sans-serif; /* Layout */ --topbar-height: 64px; } /* Dark mode overrides (toggle vía app.js, clase .dark-mode en ) */ html.dark-mode { --bg-main: #0F1923; --bg-card: #17222E; --bg-hover: #1E2C3A; --text-primary: #F1F5F9; --text-secondary: #94A3B8; --text-muted: #64748B; --border-color: #263242; } * , *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; height: 100%; } body { font-family: var(--font-body); background: var(--bg-main); color: var(--text-primary); font-size: 12px; line-height: 1.4; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); color: var(--text-primary); margin: 0 0 .5em; } a { color: var(--color-accent); text-decoration: none; } a:hover { color: var(--color-accent-hover); } img { max-width: 100%; } ::selection { background: var(--color-accent); color: #fff; } /* --------------------------------------------------------------------------- Layout raíz: sidebar + topbar + contenido --------------------------------------------------------------------------- */ .app-shell { display: flex; min-height: 100vh; } .app-content { flex: 1; display: flex; flex-direction: column; margin-left: var(--sidebar-width); min-width: 0; } .app-main { flex: 1; padding: 16px; } /* Scrollbar discreto */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: var(--radius-sm); } /* --------------------------------------------------------------------------- Responsive --------------------------------------------------------------------------- */ @media (max-width: 768px) { .app-content { margin-left: 0; } .app-main { padding: 16px; } }