/* ========================================================== TRAZION ASSETS SIDEBAR V2 ---------------------------------------------------------- Identidad: Navy #0B1D3A Slate Blue #44566F Vivid Blue #2563EB Light Gray #D6DCE6 White #FFFFFF ========================================================== */ :root { --tr-sidebar-navy: #0B1D3A; --tr-sidebar-slate: #44566F; --tr-sidebar-blue: #2563EB; --tr-sidebar-light: #D6DCE6; --tr-sidebar-white: #FFFFFF; --tr-sidebar-hover: rgba(255, 255, 255, .08); --tr-sidebar-border: rgba(214, 220, 230, .11); } /* ========================================================== SUPERFICIE PRINCIPAL ========================================================== */ body.trazion-app .main-sidebar.trazion-sidebar { background: var(--tr-sidebar-navy) !important; border-right: 1px solid var(--tr-sidebar-border) !important; box-shadow: 5px 0 22px rgba(11, 29, 58, .13) !important; border-top-right-radius: 15px !important; border-bottom-right-radius: 15px !important; overflow: hidden; transition: width .22s ease, margin-left .22s ease, box-shadow .22s ease !important; } /* ========================================================== LOGO / MARCA ========================================================== */ body.trazion-app .main-sidebar.trazion-sidebar > .brand-link.trazion-brand-link { min-height: 64px !important; display: flex !important; align-items: center !important; padding: 9px 14px !important; background: var(--tr-sidebar-navy) !important; border-bottom: 1px solid var(--tr-sidebar-border) !important; box-shadow: none !important; color: var(--tr-sidebar-white) !important; border-top-right-radius: 15px !important; } /* Logo */ body.trazion-app .main-sidebar.trazion-sidebar .brand-link .trazion-sidebar-brand-icon { width: 40px !important; height: 40px !important; max-height: 40px !important; margin: 0 10px 0 0 !important; padding: 0 !important; object-fit: contain !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } /* TRAZION */ body.trazion-app .main-sidebar.trazion-sidebar .trazion-brand-word { color: var(--tr-sidebar-white) !important; } /* ASSETS */ body.trazion-app .main-sidebar.trazion-sidebar .trazion-product-word { color: #4D7FFF !important; } /* Línea principal */ body.trazion-app .main-sidebar.trazion-sidebar .trazion-brand-title-line { color: var(--tr-sidebar-white) !important; font-size: 15px !important; font-weight: 800 !important; letter-spacing: -.01em !important; } /* BY TRAZION CLOUD */ body.trazion-app .main-sidebar.trazion-sidebar .trazion-brand-text small { color: rgba(214, 220, 230, .70) !important; font-size: 8px !important; letter-spacing: 1.05px !important; font-weight: 700 !important; } /* Hover marca */ body.trazion-app .main-sidebar.trazion-sidebar .brand-link:hover { background: rgba(255, 255, 255, .025) !important; } /* ========================================================== CONTENEDOR SIDEBAR ========================================================== */ body.trazion-app .main-sidebar.trazion-sidebar > .sidebar { background: var(--tr-sidebar-navy) !important; padding-left: 7px; padding-right: 7px; border-bottom-right-radius: 15px !important; } /* ========================================================== PANEL DE USUARIO ========================================================== */ body.trazion-app .trazion-sidebar .user-panel { margin-top: 12px !important; margin-bottom: 10px !important; padding: 9px 7px 13px !important; border-bottom: 1px solid var(--tr-sidebar-border) !important; } /* Avatar */ body.trazion-app .trazion-sidebar .user-panel .image img { width: 36px !important; height: 36px !important; padding: 2px; background: rgba(255, 255, 255, .96); border: 1px solid rgba(255, 255, 255, .15); box-shadow: 0 4px 12px rgba(0, 0, 0, .18) !important; } /* Nombre */ body.trazion-app .trazion-sidebar .user-panel .info > a { color: var(--tr-sidebar-white) !important; font-size: 14px; font-weight: 600; line-height: 1.2; } /* Rol */ body.trazion-app .trazion-sidebar .user-panel .info .text-muted { color: rgba(214, 220, 230, .65) !important; font-size: 11px; } /* Empresa */ body.trazion-app .trazion-sidebar .trazion-sidebar-tenant { color: #7EA4FF !important; font-size: 10px !important; font-weight: 500; } /* ========================================================== NAVEGACIÓN ========================================================== */ body.trazion-app .trazion-sidebar .nav-sidebar { padding-top: 3px; } /* Item */ body.trazion-app .trazion-sidebar .nav-sidebar > .nav-item { margin-bottom: 2px; } /* Link */ body.trazion-app .trazion-sidebar .nav-sidebar .nav-link { min-height: 41px; display: flex; align-items: center; margin: 2px 3px !important; padding: 9px 11px !important; border-radius: 10px !important; color: rgba(214, 220, 230, .82) !important; font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 14px; font-weight: 500; transition: background-color .16s ease, color .16s ease, box-shadow .16s ease, transform .16s ease !important; } /* Texto */ body.trazion-app .trazion-sidebar .nav-sidebar .nav-link p { margin-left: 4px; } /* ========================================================== ICONOS ========================================================== */ body.trazion-app .trazion-sidebar .nav-sidebar .nav-link .nav-icon { width: 24px !important; margin: 0 7px 0 0 !important; text-align: center; color: rgba(214, 220, 230, .72) !important; font-size: 16px !important; transition: color .16s ease, transform .16s ease; } /* ========================================================== HOVER ========================================================== */ body.trazion-app .trazion-sidebar .nav-sidebar .nav-link:hover { background: var(--tr-sidebar-hover) !important; color: var(--tr-sidebar-white) !important; } body.trazion-app .trazion-sidebar .nav-sidebar .nav-link:hover .nav-icon { color: var(--tr-sidebar-white) !important; } /* ========================================================== ELEMENTO ACTIVO ========================================================== */ body.trazion-app .trazion-sidebar .nav-sidebar > .nav-item > .nav-link.active, body.trazion-app .trazion-sidebar .nav-treeview > .nav-item > .nav-link.active { background: var(--tr-sidebar-blue) !important; color: var(--tr-sidebar-white) !important; font-weight: 600 !important; box-shadow: 0 7px 16px rgba(37, 99, 235, .27) !important; } body.trazion-app .trazion-sidebar .nav-link.active .nav-icon { color: var(--tr-sidebar-white) !important; } /* ========================================================== ENCABEZADOS ========================================================== */ body.trazion-app .trazion-sidebar .nav-header { padding: 15px 12px 6px !important; margin: 0 !important; color: rgba(214, 220, 230, .48) !important; font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 10px !important; font-weight: 700 !important; line-height: 1; letter-spacing: .10em !important; text-transform: uppercase; } /* ========================================================== SUBMENÚ ========================================================== */ body.trazion-app .trazion-sidebar .nav-treeview { margin: 3px 5px 6px 15px !important; padding-left: 6px !important; border-left: 1px solid rgba(214, 220, 230, .12); } body.trazion-app .trazion-sidebar .nav-treeview .nav-link { min-height: 36px; padding: 7px 8px !important; font-size: 13px; } body.trazion-app .trazion-sidebar .nav-treeview .nav-icon { font-size: 9px !important; } /* Flecha del treeview */ body.trazion-app .trazion-sidebar .nav-link .right { color: rgba(214, 220, 230, .55) !important; } /* ========================================================== MODO SOPORTE ========================================================== */ body.trazion-app .trazion-sidebar .trazion-support-menu-item .nav-link { color: #FCA5A5 !important; background: rgba(239, 68, 68, .10) !important; border: 1px solid rgba(239, 68, 68, .20) !important; } /* ========================================================== SIDEBAR COLAPSADO AdminLTE conserva el comportamiento. Aquí únicamente refinamos visualmente. ========================================================== */ @media (min-width: 992px) { body.trazion-app.sidebar-mini.sidebar-collapse .main-sidebar.trazion-sidebar:not(:hover) { border-top-right-radius: 12px !important; border-bottom-right-radius: 12px !important; } body.trazion-app.sidebar-mini.sidebar-collapse .main-sidebar.trazion-sidebar:not(:hover) > .brand-link { justify-content: center !important; padding-left: 7px !important; padding-right: 7px !important; } body.trazion-app.sidebar-mini.sidebar-collapse .main-sidebar.trazion-sidebar:not(:hover) .trazion-sidebar-brand-icon { margin-right: 0 !important; } /* Navegación centrada */ body.trazion-app.sidebar-mini.sidebar-collapse .main-sidebar.trazion-sidebar:not(:hover) .nav-sidebar > .nav-item > .nav-link { width: 48px !important; min-height: 40px; margin: 3px auto !important; padding: 9px 0 !important; justify-content: center; } body.trazion-app.sidebar-mini.sidebar-collapse .main-sidebar.trazion-sidebar:not(:hover) .nav-sidebar > .nav-item > .nav-link .nav-icon { width: 24px !important; margin: 0 !important; font-size: 17px !important; } /* Usuario centrado */ body.trazion-app.sidebar-mini.sidebar-collapse .main-sidebar.trazion-sidebar:not(:hover) .user-panel { justify-content: center !important; padding-left: 0 !important; padding-right: 0 !important; } body.trazion-app.sidebar-mini.sidebar-collapse .main-sidebar.trazion-sidebar:not(:hover) .user-panel .image { padding-left: 0 !important; } /* Los títulos de sección no ocupan espacio */ body.trazion-app.sidebar-mini.sidebar-collapse .main-sidebar.trazion-sidebar:not(:hover) .nav-header { display: none !important; } } /* ========================================================== AL EXPANDIR POR HOVER ========================================================== */ @media (min-width: 992px) { body.trazion-app.sidebar-mini.sidebar-collapse .main-sidebar.trazion-sidebar:hover { box-shadow: 9px 0 30px rgba(11, 29, 58, .21) !important; } } /* ========================================================== SCROLL ========================================================== */ body.trazion-app .trazion-sidebar .os-scrollbar-handle { background: rgba(214, 220, 230, .20) !important; } /* ========================================================== FONDO GENERAL DE TRAZION gris muy suave para separar sidebar y tarjetas. ========================================================== */ body.trazion-app .content-wrapper { background: #F5F7FA !important; } /* ========================================================== TRAZION SIDEBAR V2.1 Modo fijo controlado exclusivamente por PushMenu ========================================================== */ @media (min-width: 992px) { /* * Sidebar separado ligeramente del borde izquierdo. */ body.trazion-app .main-sidebar.trazion-sidebar { left: 8px !important; border-radius: 14px !important; } /* * EXPANDIDO * AdminLTE usa 250px. * Sumamos los 8px del margen exterior. */ body.trazion-app:not(.sidebar-collapse) .main-header, body.trazion-app:not(.sidebar-collapse) .content-wrapper, body.trazion-app:not(.sidebar-collapse) .main-footer { margin-left: 258px !important; } /* * COLAPSADO * 4.6rem es el ancho mini estándar de AdminLTE. * Sumamos nuevamente los 8px exteriores. */ body.trazion-app.sidebar-collapse .main-header, body.trazion-app.sidebar-collapse .content-wrapper, body.trazion-app.sidebar-collapse .main-footer { margin-left: calc(4.6rem + 8px) !important; } /* * IMPORTANTE: * Al estar contraído los iconos siguen centrados incluso * cuando el cursor está encima. */ body.trazion-app.sidebar-mini.sidebar-collapse .main-sidebar.trazion-sidebar.sidebar-no-expand { border-radius: 12px !important; } body.trazion-app.sidebar-mini.sidebar-collapse .main-sidebar.trazion-sidebar.sidebar-no-expand > .brand-link { justify-content: center !important; padding-left: 7px !important; padding-right: 7px !important; } body.trazion-app.sidebar-mini.sidebar-collapse .main-sidebar.trazion-sidebar.sidebar-no-expand .trazion-sidebar-brand-icon { margin-right: 0 !important; } body.trazion-app.sidebar-mini.sidebar-collapse .main-sidebar.trazion-sidebar.sidebar-no-expand .nav-sidebar > .nav-item > .nav-link { width: 48px !important; min-height: 40px; margin: 3px auto !important; padding: 9px 0 !important; justify-content: center !important; } body.trazion-app.sidebar-mini.sidebar-collapse .main-sidebar.trazion-sidebar.sidebar-no-expand .nav-sidebar > .nav-item > .nav-link .nav-icon { width: 24px !important; margin: 0 !important; font-size: 17px !important; } body.trazion-app.sidebar-mini.sidebar-collapse .main-sidebar.trazion-sidebar.sidebar-no-expand .user-panel { justify-content: center !important; padding-left: 0 !important; padding-right: 0 !important; } body.trazion-app.sidebar-mini.sidebar-collapse .main-sidebar.trazion-sidebar.sidebar-no-expand .user-panel .image { padding-left: 0 !important; } body.trazion-app.sidebar-mini.sidebar-collapse .main-sidebar.trazion-sidebar.sidebar-no-expand .nav-header { display: none !important; } } /* * Transición limpia al pulsar el botón hamburguesa. */ body.trazion-app .main-header, body.trazion-app .content-wrapper, body.trazion-app .main-footer { transition: margin-left .25s ease !important; } body.trazion-app .main-sidebar.trazion-sidebar { transition: width .25s ease, margin-left .25s ease, box-shadow .20s ease !important; } /* * El hover cambia solamente el color. * Ya no abre el sidebar. */ body.trazion-app .main-sidebar.trazion-sidebar.sidebar-no-expand:hover { box-shadow: 6px 0 22px rgba(11, 29, 58, .16) !important; } /* ========================================================== TRAZION SIDEBAR V2.2 Margen superior e inferior ========================================================== */ @media (min-width: 992px) { body.trazion-app .main-sidebar.trazion-sidebar, body.trazion-app .main-sidebar.trazion-sidebar::before { top: 10px !important; bottom: 10px !important; height: calc(100vh - 20px) !important; border-radius: 14px !important; } body.trazion-app .main-sidebar.trazion-sidebar > .brand-link { border-top-right-radius: 14px !important; } body.trazion-app .main-sidebar.trazion-sidebar > .sidebar { height: calc(100vh - 20px - 64px) !important; border-bottom-right-radius: 14px !important; } } /* ========================================================== TRAZION SIDEBAR V2.3 Solo panel de marca en gris de paleta ========================================================== */ body.trazion-app .main-sidebar.trazion-sidebar > .brand-link.trazion-brand-link { background: #D6DCE6 !important; border-bottom: 1px solid rgba(68, 86, 111, .18) !important; color: #0B1D3A !important; } body.trazion-app .main-sidebar.trazion-sidebar > .brand-link.trazion-brand-link:hover { background: #CDD5E0 !important; color: #0B1D3A !important; } body.trazion-app .main-sidebar.trazion-sidebar .trazion-brand-word { color: #0B1D3A !important; } body.trazion-app .main-sidebar.trazion-sidebar .trazion-product-word { color: #2563EB !important; } body.trazion-app .main-sidebar.trazion-sidebar .trazion-brand-text small { color: #44566F !important; opacity: 1 !important; }