/* ============================================================================ NEXA · Sidebar overlay moderno ---------------------------------------------------------------------------- Overlay sobre el sidebar del template (clases `.app-sidebar`, `.menu-*`). No toca HTML ni SCSS source — sólo redefine variables existentes del template y agrega refinos puntuales. ---------------------------------------------------------------------------- Carga en _Layout.cshtml DESPUÉS de nexa-modern-theme.css. Documentación: docs/nexa-sidebar.md ============================================================================ */ /* ---------------------------------------------------------------------------- Tokens del sidebar — redefinimos las variables que el template ya expone. Esto solo cambia color/forma, no estructura. ---------------------------------------------------------------------------- */ :root { /* Fondo y borde del sidebar */ --app-sidebar-border-color: rgba(15, 23, 42, 0.06); /* Texto de items */ --app-sidebar-menu-link-color: #475569; /* slate-600 */ /* Hover sutil (gris-azulado muy suave) */ --app-sidebar-menu-link-hover-bg: rgba(30, 145, 174, 0.07); /* Active: el template lo deja transparent; lo pintamos como tint del primary */ --app-sidebar-menu-link-active-bg: rgba(19, 106, 159, 0.10); --app-sidebar-menu-link-active-color: var(--bs-primary, #136a9f); /* Headers de sección */ --app-sidebar-menu-header-color: #94a3b8; /* slate-400 */ } /* ---------------------------------------------------------------------------- Sidebar container — borde derecho casi invisible + fondo soft. ---------------------------------------------------------------------------- */ /* ─── SIDEBAR BACKGROUND — 3 opciones para comparar ───────────────────────── Toggle: dejá UNA sin comentar y las otras 2 dentro de /* ... */ /* ──────────────────────────────────────────────────────────────────────────── */ /* OPCIÓN B — Tinte Nexa sutil (azul muy lavado). ← ACTIVA por default */ .app-sidebar { background: rgba(232, 240, 246, 0.86); -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%); border-right: 1px solid var(--app-sidebar-border-color); } /* OPCIÓN A — Slate frío neutro (sin tinte de color) */ /* .app-sidebar { background: rgba(241, 245, 249, 0.88); -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%); border-right: 1px solid var(--app-sidebar-border-color); } */ /* OPCIÓN C — Gradient vertical (claro arriba → más oscuro abajo, premium iOS) */ /* .app-sidebar { background: linear-gradient(180deg, rgba(248, 250, 252, 0.88) 0%, rgba(238, 242, 246, 0.84) 100%); -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%); border-right: 1px solid var(--app-sidebar-border-color); } */ /* Fallback si el browser no soporta backdrop-filter */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .app-sidebar { background: #ffffff; } } /* Respetar preferencia "reducir transparencia" del SO */ @media (prefers-reduced-transparency: reduce) { .app-sidebar { background: #ffffff; backdrop-filter: none; -webkit-backdrop-filter: none; } } /* ---------------------------------------------------------------------------- Items del menú ---------------------------------------------------------------------------- */ .app-sidebar .menu .menu-item .menu-link { border-radius: 10px; padding: 0.5rem 0.75rem; font-size: 0.875rem; /* 14px — Inter más anchas, sidebar fijo 240px */ font-weight: 500; letter-spacing: -0.005em; transition: background-color 0.18s cubic-bezier(0.16, 1, 0.3, 1), color 0.18s cubic-bezier(0.16, 1, 0.3, 1), padding-left 0.18s cubic-bezier(0.16, 1, 0.3, 1); } /* Texto del menú: nunca wrappear, truncar con "..." si es muy largo. Sin esto, items como "Configuración Llamador TV" rompen en 2 líneas. */ .app-sidebar .menu .menu-item .menu-link .menu-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; } /* ---------------------------------------------------------------------------- Paleta NEXA stripe — activa actualmente. Versión "Indigo Apple-style" está al final del archivo en un bloque comentado para rollback rápido. Hex Nexa extraídos pixel-por-pixel de Nexa.Web/wwwroot/img/n2.png: #136a9f azul Nexa (1/3 izquierda del stripe) #1e91ae cyan Nexa (1/3 medio, más brillante) #f9a637 naranja Nexa (1/3 derecha — USADO para colorear el ícono del active) #0d4a6e navy oscuro (variante derivada para texto sobre tinted bg) ---------------------------------------------------------------------------- */ /* Hover state: glass pill en azul Nexa */ .app-sidebar .menu .menu-item .menu-link:hover { background: linear-gradient(180deg, rgba(30, 145, 174, 0.18) 0%, /* cyan Nexa arriba */ rgba(19, 106, 159, 0.08) 100%); /* azul Nexa abajo */ color: #136a9f; box-shadow: 0 0 0 1px rgba(30, 145, 174, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 0.75) inset, 0 2px 8px -3px rgba(19, 106, 159, 0.18); } /* Active state — glass pill premium con paleta NEXA */ .app-sidebar .menu .menu-item.active:not(.has-sub) > .menu-link { background: linear-gradient(180deg, rgba(30, 145, 174, 0.30) 0%, /* cyan Nexa arriba */ rgba(19, 106, 159, 0.14) 100%); /* azul Nexa abajo */ color: #0d4a6e; /* navy oscuro Nexa */ font-weight: 600; position: relative; box-shadow: 0 0 0 1px rgba(19, 106, 159, 0.38) inset, 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 -1px 0 rgba(19, 106, 159, 0.12) inset, 0 6px 18px -4px rgba(19, 106, 159, 0.38), 0 2px 4px -1px rgba(30, 145, 174, 0.18); } /* Rail del item activo: azul Nexa sólido (sin gradient), con glow azul. El bg/highlights ya tienen el sentido "iluminado desde arriba" con cyan/ azul; el rail funciona como anchor sólido lateral. */ .app-sidebar .menu .menu-item.active:not(.has-sub) > .menu-link::before { content: ""; position: absolute; left: -0.625rem; top: 18%; bottom: 18%; width: 3.5px; border-radius: 0 3px 3px 0; background: #136a9f; /* azul Nexa sólido */ box-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.5), /* ring blanco fino */ 0 0 12px rgba(19, 106, 159, 0.65), /* glow azul Nexa */ 2px 0 10px -2px rgba(19, 106, 159, 0.55); /* glow lateral hacia el item */ animation: nx-rail-in 0.32s cubic-bezier(0.16, 1, 0.3, 1); } /* ÍCONO del item activo: NARANJA Nexa (#f9a637) con drop-shadow cálido. El naranja es el color "warm" del stripe del logo — usarlo en el icono del item seleccionado le da un focal point fuerte sin saturar la paleta fría del resto (bg + rail en azul/cyan). Es signature visual de la marca. */ .app-sidebar .menu .menu-item.active:not(.has-sub) > .menu-link .menu-icon, .app-sidebar .menu .menu-item.active:not(.has-sub) > .menu-link > i.fa, .app-sidebar .menu .menu-item.active:not(.has-sub) > .menu-link > i[class*="fa-"] { color: #f9a637 !important; /* naranja Nexa */ opacity: 1; filter: drop-shadow(0 1px 3px rgba(249, 166, 55, 0.5)); transform: scale(1.05); } /* Mismo treatment para el activo del parent que tiene hijos (has-sub.active), por si en algún momento se muestra como activo */ .app-sidebar .menu .menu-item.has-sub.active > .menu-link .menu-icon, .app-sidebar .menu .menu-item.has-sub.active > .menu-link > i.fa, .app-sidebar .menu .menu-item.has-sub.active > .menu-link > i[class*="fa-"] { color: #f9a637 !important; filter: drop-shadow(0 1px 3px rgba(249, 166, 55, 0.5)); } @keyframes nx-rail-in { from { opacity: 0; transform: scaleY(0.5); } to { opacity: 1; transform: scaleY(1); } } /* Parent activo (tiene hijos) — chevron rotado + ícono coloreado */ .app-sidebar .menu .menu-item.has-sub.active > .menu-link { color: var(--bs-primary, #136a9f); font-weight: 600; } .app-sidebar .menu .menu-item.has-sub.active > .menu-link .menu-icon { color: var(--bs-primary, #136a9f); } /* ---------------------------------------------------------------------------- Iconos ---------------------------------------------------------------------------- */ .app-sidebar .menu .menu-item .menu-link .menu-icon { font-size: 1.05rem; opacity: 0.85; transition: opacity 0.18s ease, transform 0.18s ease; } .app-sidebar .menu .menu-item .menu-link:hover .menu-icon { opacity: 1; transform: scale(1.05); } .app-sidebar .menu .menu-item.active > .menu-link .menu-icon { opacity: 1; } /* Badge sobre el ícono — pildora más moderna */ .app-sidebar .menu .menu-item .menu-link .menu-icon .menu-icon-label { background: linear-gradient(135deg, #f59e0b 0%, #dc2626 100%); border: 1.5px solid #ffffff; box-shadow: 0 2px 4px rgba(220, 38, 38, 0.3); font-weight: 700; letter-spacing: 0; } /* ---------------------------------------------------------------------------- Headers de sección — uppercase con tracking ---------------------------------------------------------------------------- */ .app-sidebar .menu .menu-header { text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.6875rem; /* 11px */ font-weight: 600; color: var(--app-sidebar-menu-header-color); margin: 1rem 1.25rem 0.4rem; padding-top: 0.4rem; } /* ---------------------------------------------------------------------------- Divider más sutil ---------------------------------------------------------------------------- */ .app-sidebar .menu .menu-divider { background: var(--app-sidebar-border-color); margin: 0.75rem 1rem; } /* ---------------------------------------------------------------------------- Submenú — línea vertical guía indica jerarquía visualmente ---------------------------------------------------------------------------- */ .app-sidebar .menu .menu-item.has-sub .menu-submenu { position: relative; padding-left: 1.5rem; margin-top: 0.15rem; } .app-sidebar .menu .menu-item.has-sub .menu-submenu::before { content: ""; position: absolute; left: 1.1rem; top: 0.3rem; bottom: 0.5rem; width: 1.5px; background: var(--app-sidebar-border-color); border-radius: 1.5px; } .app-sidebar .menu .menu-item.has-sub .menu-submenu .menu-item .menu-link { padding: 0.35rem 0.625rem; font-size: 0.875rem; /* 14px, un poco más chico que parent */ color: #64748b; /* slate-500 */ } .app-sidebar .menu .menu-item.has-sub .menu-submenu .menu-item .menu-link:hover { color: var(--bs-primary, #136a9f); background: var(--app-sidebar-menu-link-hover-bg); } .app-sidebar .menu .menu-item.has-sub .menu-submenu .menu-item.active .menu-link { color: var(--bs-primary, #136a9f); font-weight: 600; background: var(--app-sidebar-menu-link-active-bg); } /* Marker en el submenú activo — punto a la izquierda en lugar del rail */ .app-sidebar .menu .menu-item.has-sub .menu-submenu .menu-item.active .menu-link::before { content: ""; position: absolute; left: -0.55rem; top: 50%; transform: translateY(-50%); width: 6px; height: 6px; border-radius: 50%; background: var(--bs-primary, #136a9f); box-shadow: 0 0 0 3px rgba(19, 106, 159, 0.18); } /* Caret animado al expandir */ .app-sidebar .menu .menu-item.has-sub > .menu-link .menu-caret { transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1); opacity: 0.5; } .app-sidebar .menu .menu-item.has-sub.active > .menu-link .menu-caret { opacity: 0.8; transform: rotate(-180deg); } /* ---------------------------------------------------------------------------- Scrollbar interno del sidebar más sutil ---------------------------------------------------------------------------- */ .app-sidebar .app-sidebar-content { padding: 0.5rem 0.25rem; } /* ---------------------------------------------------------------------------- Modo "minified" (sidebar colapsado) — preservar API del template, sólo ajustar la rail del active para que se vea bien con el ancho reducido. ---------------------------------------------------------------------------- */ .app-sidebar-minified .app-sidebar .menu .menu-item.active:not(.has-sub) > .menu-link::before { left: -0.5rem; top: 30%; bottom: 30%; } .app-sidebar-minified .app-sidebar .menu .menu-item .menu-link { border-radius: 10px; } /* ============================================================================ ROLLBACK — Paleta INDIGO Apple-style (probada y descartada el 2026-05-23) ---------------------------------------------------------------------------- Si querés volver a probar esta paleta: 1. Comentar las 3 reglas activas + el icon orange del bloque NEXA stripe (líneas ~62-150 de este archivo, sección "Paleta NEXA stripe"). 2. Descomentar este bloque (eliminar del wrapper). Tonos: #818cf8 indigo-400 (light, top accent) #6366f1 indigo-500 (mid, signature) #4f46e5 indigo-600 (deep) #3730a3 indigo-800 (texto alto contraste) ============================================================================ */ /* .app-sidebar .menu .menu-item .menu-link:hover { background: linear-gradient(180deg, rgba(129, 140, 248, 0.18) 0%, rgba(99, 102, 241, 0.08) 100%); color: #4f46e5; box-shadow: 0 0 0 1px rgba(99, 102, 241, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 0.75) inset, 0 2px 8px -3px rgba(79, 70, 229, 0.18); } .app-sidebar .menu .menu-item.active:not(.has-sub) > .menu-link { background: linear-gradient(180deg, rgba(129, 140, 248, 0.30) 0%, rgba(99, 102, 241, 0.14) 100%); color: #3730a3; font-weight: 600; position: relative; box-shadow: 0 0 0 1px rgba(99, 102, 241, 0.38) inset, 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 -1px 0 rgba(79, 70, 229, 0.12) inset, 0 6px 18px -4px rgba(79, 70, 229, 0.38), 0 2px 4px -1px rgba(129, 140, 248, 0.18); } .app-sidebar .menu .menu-item.active:not(.has-sub) > .menu-link::before { content: ""; position: absolute; left: -0.625rem; top: 18%; bottom: 18%; width: 3.5px; border-radius: 0 3px 3px 0; background: linear-gradient(180deg, #a5b4fc 0%, #818cf8 30%, #6366f1 60%, #4f46e5 100%); box-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.5), 0 0 12px rgba(99, 102, 241, 0.7), 2px 0 10px -2px rgba(79, 70, 229, 0.6), 0 0 24px rgba(129, 140, 248, 0.35); animation: nx-rail-in 0.32s cubic-bezier(0.16, 1, 0.3, 1); } */