/* * Colindar Theme CSS * Modernización del tema INSPINIA Admin v2.4 * Alineado con el brand de colindar.com * * Este archivo se carga ÚLTIMO en el y sobreescribe INSPINIA, * Bootstrap 3 y colindar.css sin tocar ningún archivo original. * Para revertir: comentar stylesheet_link en index.volt. */ /* ======================================================== SECCIÓN 0: CSS CUSTOM PROPERTIES (VARIABLES) ======================================================== */ :root { /* Paleta brand — alineada con colindar.com */ --ct-primary: #2EA3F2; --ct-primary-dark: #1a8fd8; --ct-primary-light: rgba(46, 163, 242, 0.10); --ct-accent: #F59E0B; /* Ámbar — reemplaza #ffcb06 */ --ct-accent-dark: #d97706; --ct-success: #10B981; --ct-success-dark: #059669; --ct-danger: #EF4444; --ct-danger-dark: #DC2626; --ct-info: #06B6D4; /* Semi-transparencias para badges de icono (.ct-icon-*) */ --ct-primary-alpha: rgba(46, 163, 242, .12); --ct-success-alpha: rgba(16, 185, 129, .12); --ct-accent-alpha: rgba(245, 158, 11, .12); --ct-danger-alpha: rgba(239, 68, 68, .10); --ct-secondary-alpha: rgba(100, 116, 139, .10); /* Sidebar — oscuro elegante */ --ct-sidebar-bg: #1a2535; --ct-sidebar-bg2: #16202f; --ct-sidebar-hover: #243447; --ct-sidebar-text: #b8c9dc; /* era #8fa3bb — ratio ~6.1:1 */ --ct-sidebar-text-sub: rgba(184, 201, 220, .75); /* submenús — ratio ~5.0:1 */ --ct-sidebar-text-section: rgba(184, 201, 220, .50); /* section labels uppercase/bold */ --ct-sidebar-active-border: #F59E0B; /* Backgrounds */ --ct-bg-body: #F8FAFC; /* Más frío y moderno que #f4f4f4 */ --ct-bg-card: #ffffff; /* Texto */ --ct-text-primary: #1E293B; --ct-text-secondary: #64748B; --ct-text-muted: #94A3B8; /* Bordes */ --ct-border: #E2E8F0; --ct-border-focus: #2EA3F2; /* Border radius */ --ct-radius-sm: 6px; --ct-radius-md: 8px; --ct-radius-lg: 12px; --ct-radius-xl: 16px; --ct-radius-full: 50px; /* Sombras */ --ct-shadow-sm: 0 1px 3px rgba(15,23,42,.08), 0 1px 2px rgba(15,23,42,.04); --ct-shadow-md: 0 4px 6px rgba(15,23,42,.07), 0 2px 4px rgba(15,23,42,.05); --ct-shadow-lg: 0 10px 25px rgba(15,23,42,.12), 0 4px 6px rgba(15,23,42,.06); /* Transiciones */ --ct-trans-fast: 150ms ease; --ct-trans: 250ms ease; } /* ======================================================== SECCIÓN 1: TIPOGRAFÍA BASE ======================================================== */ body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; font-size: 13px; color: var(--ct-text-primary); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, sans-serif; font-weight: 600; color: var(--ct-text-primary); } /* Mantener tamaños INSPINIA, solo mejorar jerarquía visual */ h3, h4, h5 { font-weight: 600; color: var(--ct-text-primary); } p { color: var(--ct-text-secondary); } a { color: var(--ct-primary); transition: color var(--ct-trans-fast); } a:hover { color: var(--ct-primary-dark); } small, .small { font-size: 11px; color: var(--ct-text-muted); } /* ======================================================== SECCIÓN 2: LAYOUT Y FONDOS ======================================================== */ .gray-bg, #page-wrapper { background-color: var(--ct-bg-body); } /* Sidebar wrapper — reemplaza flat #2f4050 */ .azul-bg { background-color: var(--ct-sidebar-bg); } /* ======================================================== SECCIÓN 3: SIDEBAR — REDISEÑO COMPLETO ======================================================== */ /* ── Container ─────────────────────────────────────────── */ nav.navbar-static-side, .navbar-default.navbar-static-side { background: linear-gradient(160deg, #1e2d42 0%, #121c2c 100%) !important; border-right: 1px solid rgba(255, 255, 255, .035); box-shadow: 2px 0 12px rgba(0, 0, 0, .18); } /* ── Scrollbar personalizado ───────────────────────────── */ .sidebar-collapse { background: transparent; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .12) transparent; } .sidebar-collapse::-webkit-scrollbar { width: 3px; } .sidebar-collapse::-webkit-scrollbar-track { background: transparent; } .sidebar-collapse::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .16); border-radius: 99px; } /* ── Logo area ─────────────────────────────────────────── */ .nav-header { padding: 0 !important; border-bottom: 1px solid rgba(255, 255, 255, .06) !important; background: rgba(0, 0, 0, .22) !important; background-image: none !important; } .ct-brand-area { padding: 18px 16px 14px; display: flex; flex-direction: column; gap: 12px; } .ct-brand-logo { display: block; line-height: 0; border-radius: var(--ct-radius-sm); outline-offset: 3px; } .logo-left-menu { max-height: 44px; max-width: 148px; display: block; object-fit: contain; object-position: left center; } /* .ct-lang-switcher — eliminado del sidebar (flags movidas al dropdown de usuario) */ /* ── Botón cerrar canvas (móvil) ───────────────────────── */ /* INSPINIA posiciona via `a.close-canvas-menu` — replicamos para