/* ========================================================================== invoiceBin · Menú lateral Sustituye la piel del menú que traía VertebralColumn.css. Se carga desde _Navigation.cshtml, dentro del , así que gana en cascada sobre style.css (INSPINIA) y sobre los cuatro skins alternativos sin necesidad de !important. REGLA DE ORO: TODO va anidado bajo .navbar-static-side. Las clases .nav, .nav-header y .active son de Bootstrap y viven también en pestañas, barras superiores y paginadores de toda la aplicación; sin acotar, esta hoja las pintaría de verde y dejaría ilegible media aplicación. Se conserva el marcado de INSPINIA (#side-menu, .nav-second-level, .fa.arrow, .nav-label) para que metisMenu y el modo mini-navbar sigan funcionando. ========================================================================== */ .navbar-static-side { --ib-menu-fondo: #101826; --ib-menu-fondo-2: #0B1220; --ib-menu-sub: #0D1524; --ib-menu-texto: #A8B3C7; --ib-menu-texto-vivo: #FFFFFF; --ib-menu-tenue: #64748B; --ib-menu-linea: rgba(255,255,255,.06); --ib-menu-acento: #22C55E; --ib-menu-acento-2: #0A84FF; } /* ---------- Lienzo del menú ---------- */ /* Las dos clases van en el mismo

, así que el degradado se declara sobre ambas juntas: si se pusiera solo en .navbar-static-side, la regla .navbar-default de INSPINIA (misma especificidad, declarada después) lo borraría. */ .navbar-default.navbar-static-side { background: linear-gradient(180deg, var(--ib-menu-fondo) 0%, var(--ib-menu-fondo-2) 100%); border-right: 1px solid rgba(0,0,0,.35); border-color: rgba(0,0,0,.35); } .navbar-static-side .sidebar-collapse { background: transparent; } .navbar-static-side #side-menu { padding-bottom: 40px; } /* ---------- Tarjeta de perfil ---------- */ /* Sin !important: INSPINIA encoge esta tarjeta al colapsar la barra (body.mini-navbar .nav-header { padding: 0 }) y hay que dejarlo pasar. */ .navbar-static-side .nav-header { background: transparent; background-image: none; padding: 22px 20px 18px; border-bottom: 1px solid var(--ib-menu-linea); text-align: left; } .navbar-static-side .nav-header .profile-element img.img-circle { width: 52px; height: 52px; object-fit: cover; border: 2px solid rgba(255,255,255,.14); box-shadow: 0 4px 14px rgba(0,0,0,.35); } .navbar-static-side .nav-header .font-bold { color: #F1F5F9; font-size: 14px; font-weight: 600; letter-spacing: -0.01em; } .navbar-static-side .nav-header .text-muted { color: var(--ib-menu-tenue); font-size: 11.5px; letter-spacing: .02em; } .navbar-static-side .nav-header .dropdown-menu { background: #142033; border: 1px solid var(--ib-menu-linea); border-radius: 12px; padding: 6px; box-shadow: 0 18px 40px rgba(0,0,0,.45); } .navbar-static-side .nav-header .dropdown-menu > li > a { color: var(--ib-menu-texto); border-radius: 8px; padding: 8px 12px; font-size: 13px; } .navbar-static-side .nav-header .dropdown-menu > li > a:hover { background: rgba(255,255,255,.07); color: #fff; } .navbar-static-side .nav-header .dropdown-menu .divider { background: var(--ib-menu-linea); margin: 6px 4px; } /* ---------- Encabezado de sección ---------- */ /* Agrupa los ítems por bloque temático. No es clicable ni entra a metisMenu. */ .navbar-static-side li.ib-sec { padding: 18px 22px 7px; pointer-events: none; } .navbar-static-side li.ib-sec span { display: block; font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #4E5C74; } /* En modo mini el rótulo estorba: se cambia por una línea divisoria. */ body.mini-navbar .navbar-static-side li.ib-sec { padding: 10px 16px; } body.mini-navbar .navbar-static-side li.ib-sec span { font-size: 0; border-top: 1px solid var(--ib-menu-linea); } /* ---------- Ítems de primer nivel ---------- */ .navbar-default.navbar-static-side .nav > li > a { color: var(--ib-menu-texto); font-weight: 500; font-size: 13.5px; letter-spacing: -0.005em; padding: 10px 18px 10px 20px; margin: 1px 10px; border-radius: 10px; display: flex; align-items: center; gap: 11px; position: relative; transition: background .18s ease, color .18s ease; } .navbar-default.navbar-static-side .nav > li > a i { font-size: 15px; width: 20px; text-align: center; color: #7C8DA8; margin-right: 0; flex: 0 0 auto; transition: color .18s ease; } .navbar-default.navbar-static-side .nav > li > a .nav-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .navbar-default.navbar-static-side .nav > li > a:hover, .navbar-default.navbar-static-side .nav > li > a:focus { background: rgba(255,255,255,.055); color: var(--ib-menu-texto-vivo); } .navbar-default.navbar-static-side .nav > li > a:hover i, .navbar-default.navbar-static-side .nav > li.active > a i { color: var(--ib-menu-acento); } /* Ítem abierto o en curso */ .navbar-default.navbar-static-side .nav > li.active { background: transparent; border-left: none; } .navbar-default.navbar-static-side .nav > li.active > a { background: rgba(34,197,94,.10); color: #fff; font-weight: 600; } /* Marca lateral discreta en lugar del borde grueso del tema. */ .navbar-default.navbar-static-side .nav > li.active > a:before { content: ''; position: absolute; left: -10px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--ib-menu-acento); } /* Flecha del acordeón */ .navbar-static-side .nav > li > a .fa.arrow { float: none; margin-left: auto; font-size: 11px; color: #55637B; transition: transform .22s ease, color .18s ease; } .navbar-static-side .nav > li.active > a .fa.arrow, .navbar-static-side .nav > li > a:hover .fa.arrow { color: var(--ib-menu-texto); } /* INSPINIA cambia el glifo entre abierto y cerrado; aquí se deja uno fijo y se distingue el estado girándolo, que se lee mejor. */ .navbar-static-side .fa.arrow:before, .navbar-static-side .active > a > .fa.arrow:before { content: "\f105"; } .navbar-static-side .nav > li.active > a .fa.arrow { transform: rotate(90deg); } /* Insignias "Nuevo" */ .navbar-static-side .nav > li > a .label { font-size: 9.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; padding: 3px 7px; border-radius: 999px; background: var(--ib-menu-acento-2); float: none; margin-right: 0; } /* ---------- Submenús ---------- */ .navbar-static-side ul.nav-second-level { background: var(--ib-menu-sub); margin: 2px 10px 6px; border-radius: 10px; padding: 5px 0; box-shadow: inset 0 1px 0 rgba(255,255,255,.03); } .navbar-default.navbar-static-side .nav-second-level li a { color: #8C99AE; font-size: 12.5px; font-weight: 500; padding: 7px 14px 7px 42px; border-radius: 7px; margin: 0 6px; position: relative; display: flex; align-items: center; gap: 9px; transition: background .16s ease, color .16s ease; } .navbar-default.navbar-static-side .nav-second-level li a i { font-size: 12.5px; width: 16px; text-align: center; color: #5C6B85; position: absolute; left: 16px; transition: color .16s ease; } .navbar-default.navbar-static-side .nav-second-level li a:hover { background: rgba(255,255,255,.05); color: #fff; } .navbar-default.navbar-static-side .nav-second-level li a:hover i { color: var(--ib-menu-acento); } .navbar-default.navbar-static-side .nav-second-level > li.active > a { color: #fff; background: rgba(34,197,94,.13); } .navbar-default.navbar-static-side .nav-second-level > li.active > a i { color: var(--ib-menu-acento); } .navbar-static-side .nav-second-level li:last-child { margin-bottom: 0; } /* ---------- Tercer nivel (Solicitudes) ---------- */ .navbar-static-side ul.nav-third-level { background: rgba(0,0,0,.22); border-radius: 8px; margin: 2px 8px 4px 30px; padding: 4px 0; } .navbar-default.navbar-static-side .nav-third-level li a { padding: 6px 12px 6px 24px; font-size: 12px; color: #7E8CA3; } .navbar-static-side .nav-third-level li a:before { content: ''; position: absolute; left: 12px; top: 50%; width: 4px; height: 4px; margin-top: -2px; border-radius: 50%; background: #46556E; } .navbar-static-side .nav-third-level li a:hover:before { background: var(--ib-menu-acento); } /* ---------- Modo mini (barra colapsada) ---------- */ body.mini-navbar .navbar-default.navbar-static-side .nav > li > a { margin: 1px 8px; padding: 11px 0; justify-content: center; gap: 0; } body.mini-navbar .navbar-default.navbar-static-side .nav > li > a i { font-size: 17px; margin: 0; } body.mini-navbar .navbar-static-side .nav > li > a .fa.arrow, body.mini-navbar .navbar-static-side .nav > li > a .label { display: none; } body.mini-navbar .navbar-default.navbar-static-side .nav > li.active > a:before { left: -8px; } body.mini-navbar .navbar-static-side .nav .nav-second-level { background: #142033; border-radius: 0 12px 12px 0; margin: 0; padding: 8px 0; box-shadow: 0 18px 40px rgba(0,0,0,.45); } body.mini-navbar .navbar-default.navbar-static-side .nav > li > .nav-second-level li a { font-size: 12.5px; padding: 7px 16px 7px 38px; } /* ---------- Pie del menú ---------- */ .navbar-static-side .logo-element { background: transparent; padding: 16px 0; text-align: center; } .navbar-static-side .logo-element img { width: 30px; opacity: .9; } .navbar-static-side .logo-element font { display: none; } /* ---------- Detalles ---------- */ @media (max-width: 768px) { .navbar-default.navbar-static-side .nav > li > a { font-size: 13px; padding: 10px 14px; margin: 1px 6px; } .navbar-static-side li.ib-sec { padding: 14px 16px 6px; } } @media (prefers-reduced-motion: reduce) { .navbar-static-side .nav > li > a, .navbar-static-side .nav > li > a i, .navbar-static-side .nav > li > a .fa.arrow, .navbar-static-side .nav-second-level li a { transition: none; } }