/* ══ Netebu · barra de navegacion ══════════════════════════════ */ #nav, .navbar-side{ --nb-blue:#4A90D9; --nb-violet:#7B5CF6; --nb-pink:#E84098; --nb-grad:linear-gradient(135deg,#4A90D9 0%,#7B5CF6 50%,#E84098 100%); --nb-grad-suave:linear-gradient(135deg,rgba(74,144,217,0.14) 0%,rgba(123,92,246,0.14) 50%,rgba(232,64,152,0.14) 100%); --nb-ink:#14111F; --nb-ink-2:#4C4560; --nb-ink-3:#726C85; --nb-line:#E9E4F3; --nb-line-2:#D8D0EC; --nb-paper:#FFFFFF; --nb-paper-2:#FAF8FE; --nb-violet-aa:#7656F6; --nb-night:#0B0A16; --nb-night-2:#141227; --nb-night-3:#1E1B33; --nb-on:#F2F3FB; --nb-on-2:#B9BEDD; --nb-on-3:#8E94BC; --nb-ff-d:"Outfit",system-ui,-apple-system,sans-serif; --nb-ff-b:"Figtree",system-ui,-apple-system,sans-serif; } /* ── la barra ─────────────────────────────────────────────── */ /* AQUI HUBO UN `backdrop-filter` PARA UN EFECTO DE CRISTAL Y HUBO QUE QUITARLO. `backdrop-filter` crea un CONTEXTO DE APILAMIENTO propio —igual que `transform`, `filter` u `opacity` menor que 1—, y eso metia TODA la barra, desplegables incluidos, por debajo del contenido: el menu de Hosting quedaba tapado por `.hero-in` en la portada, por el banner en hosting, por el `h1` en SSL... Subir el z-index de la barra a 1030 NO lo arreglo: el contexto se crea de todas formas y el menu no puede escapar de el. Un adorno no vale romper la navegacion de todo el sitio, asi que fondo solido y a otra cosa. La barra sigue ganando presencia al bajar mediante la sombra. */ #nav.cros-navbar{ background:var(--nb-paper) !important; /* FIJA AL BAJAR, y con `fixed`, no con `sticky`. `position:sticky` deja de funcionar si CUALQUIER ancestro tiene `overflow` distinto de `visible`, y Croster declara `body{overflow-x:hidden}` —del que depende el full-bleed de la portada, asi que no se puede quitar—. Medido: con sticky la barra se iba con el scroll (top=-1400 tras bajar 1400 px). `fixed` no depende del overflow de los ancestros; la altura se compensa con un padding en el body que calcula el script. */ position:fixed !important; top:0; left:0; right:0; z-index:1030; /* un poco mas de aire: la barra pedia presencia */ padding-top:11px !important; padding-bottom:11px !important; border-bottom:1px solid var(--nb-line) !important; box-shadow:0 1px 2px rgba(20,17,31,0.04) !important; transition:box-shadow 0.26s ease; } /* al bajar, la barra se despega un poco del contenido */ body.nb-scrolled #nav.cros-navbar{ box-shadow:0 1px 2px rgba(20,17,31,0.05), 0 10px 30px -14px rgba(20,17,31,0.22) !important; } /* ── cristal, SOLO EN ESCRITORIO ──────────────────────────── */ /* Deja entrever lo que pasa por debajo. Muestreada la franja de la barra en home/hosting/ssl/store a tres alturas de scroll, el peor fondo es el #241D3C de la home: al 0,86 compone #E0DFE4 y el texto queda en 14,0:1, muy por encima del 4,5:1 de AA. 0,80 ya NO vale: sobre esas secciones oscuras compone #D3D2D8 y la barra deja de leerse blanca —se ve gris sucia—. El desenfoque sube a 26 px y la saturacion a 180% para que lo que pasa por debajo se insinue con su color en vez de como una mancha gris. En movil NO: el panel lateral se apoya en esta barra y el desenfoque sobre un fondo en movimiento cuesta bateria sin aportar nada. OJO: `backdrop-filter` crea un contexto de apilamiento, por eso la barra lleva `z-index:1030` explicito —sin el, los desplegables se irian por debajo del contenido—. */ @media (min-width:992px){ #nav.cros-navbar{ background:rgba(255,255,255,0.86) !important; backdrop-filter:saturate(180%) blur(26px); -webkit-backdrop-filter:saturate(180%) blur(26px); } body.nb-scrolled #nav.cros-navbar{ background:rgba(255,255,255,0.86) !important; } } /* si el navegador no sabe de backdrop-filter, blanco entero */ @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ #nav.cros-navbar{background:var(--nb-paper) !important} } /* ══ MODO ISLA ══════════════════════════════════════════════ Arriba del todo, y SOLO en las paginas que tienen una cabecera oscura debajo, la barra se despega de los bordes y se vuelve translucida: se integra con el hero y el logo pasa a su version blanca. Al bajar recupera el fondo solido y el logo en color. POR QUE NO EN TODAS: el carrito y buena parte del area de cliente arrancan con fondo BLANCO. Una barra translucida con texto claro encima seria ilegible. El script marca `body.nb-hero` solo cuando encuentra una de las cabeceras oscuras conocidas, asi que no se decide muestreando colores —que falla con imagenes— sino por la estructura real de la pagina. */ /* Croster declara `body{margin-top:57px}` SOLO EN MOVIL para dejar sitio a su barra. Con la isla flotando sobre el hero ese margen sobra: empujaba la cabecera a y=57 y la isla quedaba 47 px sobre fondo BLANCO, con el texto claro encima. */ body.nb-hero{margin-top:0 !important} /* LA FORMA DE ISLA SE MANTIENE SIEMPRE. Lo unico que cambia al bajar es el color: de translucida sobre el hero a blanca y solida. Antes la barra recuperaba el ancho completo al hacer scroll y se perdia el efecto; asi se conserva de arriba abajo. */ body.nb-hero #nav.cros-navbar{ /* el lleva la clase `no-radius` del tema, que pone `border-radius:0` a medio sitio: hace falta `!important` */ border-radius:18px !important; left:16px; right:16px; max-width:1400px; margin-inline:auto; top:14px; } /* arriba del todo: translucida, integrada con la cabecera */ body:not(.login):not(.nb-claro):not(.nb-scrolled) #nav.cros-navbar{ background:rgba(255,255,255,0.06) !important; backdrop-filter:saturate(150%) blur(16px); -webkit-backdrop-filter:saturate(150%) blur(16px); border:1px solid rgba(255,255,255,0.16) !important; box-shadow:0 18px 50px -22px rgba(0,0,0,0.75) !important; } /* al bajar: la misma isla, ahora blanca. En MOVIL casi opaca, porque alli no hay `backdrop-filter` —ver el bloque de cristal— y sin desenfoque el contenido se veria nitido a traves. */ body.nb-hero.nb-scrolled #nav.cros-navbar{ background:rgba(255,255,255,0.97) !important; border:1px solid var(--nb-line) !important; box-shadow:0 2px 6px rgba(20,17,31,0.06), 0 18px 44px -20px rgba(20,17,31,0.34) !important; } @media (min-width:992px){ body.nb-hero.nb-scrolled #nav.cros-navbar{ background:rgba(255,255,255,0.86) !important; } } /* el contenido de la barra, en blanco */ body:not(.login):not(.nb-claro):not(.nb-scrolled) #nav .navbar-nav > li > a, body:not(.login):not(.nb-claro):not(.nb-scrolled) #nav .navbar-nav > li > a .caret{ color:var(--nb-on) !important; } body:not(.login):not(.nb-claro):not(.nb-scrolled) #nav .navbar-nav > li > a:hover, body:not(.login):not(.nb-claro):not(.nb-scrolled) #nav .navbar-nav > li:hover > a{ color:#fff !important; background:rgba(255,255,255,0.10) !important; } body:not(.login):not(.nb-claro):not(.nb-scrolled) #nav .user_icon > a{ border-color:rgba(255,255,255,0.28) !important; color:var(--nb-on) !important; } body:not(.login):not(.nb-claro):not(.nb-scrolled) #nav .user_icon > a:hover{ border-color:#fff !important; color:#fff !important; } body:not(.login):not(.nb-claro):not(.nb-scrolled) #nav .cart-icon a, body:not(.login):not(.nb-claro):not(.nb-scrolled) #nav [class*="Cart"] > a{color:var(--nb-on) !important} body:not(.login):not(.nb-claro):not(.nb-scrolled) .navbar-toggler{color:var(--nb-on) !important} body:not(.login):not(.nb-claro):not(.nb-scrolled) .navbar-toggler:hover{background:rgba(255,255,255,0.10) !important} /* EL LOGO. Croster ya trae las dos versiones en el HTML, pero la de modo oscuro —logonetebudarkmode.webp— viene con FONDO SOLIDO #1D1D1D, sin transparencia: sobre la isla se veia su recuadro. Se genero una version con alfa real (logonetebu_blanco_2026.webp) quitando ese fondo y desmultiplicando el color, para que los bordes no quedaran sucios de gris. El script le cambia el `src`. */ body:not(.login):not(.nb-claro):not(.nb-scrolled) #nav .logo-light{display:none !important} body:not(.login):not(.nb-claro):not(.nb-scrolled) #nav .logo-dark{display:block !important} /* la transicion entre los dos estados */ #nav.cros-navbar{ transition:background 0.3s ease, border-color 0.3s ease, border-radius 0.3s ease, box-shadow 0.3s ease, left 0.3s ease, right 0.3s ease, top 0.3s ease; } #nav .logo-light, #nav .logo-dark{transition:opacity 0.25s ease} /* en movil la isla se ajusta a los bordes */ @media (max-width:767px){ body.nb-hero #nav.cros-navbar{ left:10px; right:10px; top:10px; border-radius:14px !important; } } /* ── enlaces de primer nivel ──────────────────────────────── */ #nav .navbar-nav > li > a{ font-family:var(--nb-ff-d) !important; font-size:1.055rem !important; font-weight:600 !important; color:var(--nb-ink) !important; letter-spacing:-0.006em; border-radius:10px; margin:0 2px; transition:color 0.22s ease, background 0.22s ease; } /* Sin pastilla: los no tienen la misma altura entre si —el de Soporte y el del carrito son mas cortos— y el fondo salia descuadrado, sobresaliendo por arriba y por abajo. Solo color. */ #nav .navbar-nav > li > a:hover, #nav .navbar-nav > li:hover > a, #nav .navbar-nav > li.active > a{ color:var(--nb-violet-aa) !important; background:transparent !important; } /* la flechita del desplegable */ #nav .navbar-nav > li > a .caret, #nav .navbar-nav > li > a:after{ color:var(--nb-ink-3) !important; transition:transform 0.22s ease; } #nav .navbar-nav > li:hover > a:after{transform:rotate(180deg)} /* ── desplegables ─────────────────────────────────────────── */ /* El tema los deja cuadrados, sin sombra y pegados a la barra. */ #nav .dropdown-menu{ background:var(--nb-paper) !important; border:1px solid var(--nb-line) !important; border-radius:14px !important; /* El margen se cuenta desde el ENLACE, no desde la barra, y la barra tiene 11 px de relleno inferior: con 9 px el menu acababa 3 px METIDO DENTRO de ella. Se suma ese relleno mas el aire que se quiere de verdad. */ padding:8px !important; margin-top:23px !important; min-width:212px; box-shadow:0 2px 4px rgba(20,17,31,0.05), 0 20px 44px -18px rgba(20,17,31,0.26) !important; } /* Ese margen de 9 px deja una franja muerta entre el enlace y el menu: al bajar el raton hacia el submenu se pierde el hover y el menu se cierra en la cara. Un puente invisible la cubre. Nada de `overflow:hidden` en el menu, o recortaria este pseudoelemento. */ #nav .dropdown-menu::before{ content:""; position:absolute; left:0; right:0; top:-24px; height:24px; } #nav .dropdown-menu > li > a, #nav .dropdown-menu li a{ font-family:var(--nb-ff-b) !important; font-size:1rem !important; font-weight:500 !important; color:var(--nb-ink-2) !important; padding:10px 14px !important; border-radius:9px; display:flex; align-items:center; gap:10px; transition:background 0.2s ease, color 0.2s ease, padding-left 0.2s ease; } #nav .dropdown-menu > li > a:hover, #nav .dropdown-menu li a:hover{ background:var(--nb-paper-2) !important; color:var(--nb-violet-aa) !important; padding-left:17px !important; } #nav .dropdown-menu li a i, #nav .dropdown-menu li a .fa, #nav .dropdown-menu li a .fas, #nav .dropdown-menu li a .far, #nav .dropdown-menu li a .fab{ flex:0 0 19px; width:19px; text-align:center; color:var(--nb-violet) !important; font-size:0.98rem; transition:color 0.2s ease; } #nav .dropdown-menu > li > a:hover i{color:var(--nb-pink) !important} #nav .dropdown-menu .divider, #nav .dropdown-menu .dropdown-divider{ background:var(--nb-line) !important; margin:6px 4px !important; } /* ── los desplegables, con el mismo cristal que la barra ──── La barra y su menu tienen que ser LA MISMA superficie: si la barra deja pasar el fondo y el menu no, el menu parece pegado encima en vez de desplegado desde ella. Solo en escritorio: en movil los submenus viven dentro del panel lateral, que es opaco y oscuro, y tiene sus propias reglas mas abajo. Y sin `backdrop-filter` disponible el texto de la pagina se leeria a traves del menu, que es justo lo que hay que evitar. */ @media (min-width:992px){ #nav .dropdown-menu{ background:rgba(255,255,255,0.86) !important; backdrop-filter:saturate(180%) blur(26px); -webkit-backdrop-filter:saturate(180%) blur(26px); border-color:rgba(233,228,243,0.8) !important; } #nav .dropdown-menu > li > a:hover, #nav .dropdown-menu li a:hover{ background:rgba(123,92,246,0.09) !important; } } @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ #nav .dropdown-menu{background:var(--nb-paper) !important} } /* ── y arriba del todo, el tono de la isla ────────────────── Dos capas: un velo oscuro que garantiza el contraste sobre CUALQUIER hero, y encima el mismo blanco al 6-7% que lleva la barra. Sin el velo no sale: muestreado el hero de la home bajo el menu de Dominios, sus pixeles mas claros llegan a #6152C0 y ahi el blanco al 6% deja el texto en 4,82:1 —pasa AA por los pelos, y en otro hero mas claro no pasaria—. Con el velo al 0,42 ese peor caso sube a 7,5:1 y el menu sigue dejando pasar el hero casi como la barra. Al 0,55 daba 11,7:1 pero se veia mas oscuro que ella, y tienen que parecer la misma superficie. El orden importa: en `background` la PRIMERA capa va encima. */ body:not(.login):not(.nb-claro):not(.nb-scrolled) #nav .dropdown-menu{ background:linear-gradient(rgba(255,255,255,0.07),rgba(255,255,255,0.07)), rgba(20,17,31,0.42) !important; border:1px solid rgba(255,255,255,0.16) !important; box-shadow:0 18px 50px -22px rgba(0,0,0,0.75) !important; } body:not(.login):not(.nb-claro):not(.nb-scrolled) #nav .dropdown-menu > li > a, body:not(.login):not(.nb-claro):not(.nb-scrolled) #nav .dropdown-menu li a{ color:var(--nb-on) !important; } body:not(.login):not(.nb-claro):not(.nb-scrolled) #nav .dropdown-menu > li > a:hover, body:not(.login):not(.nb-claro):not(.nb-scrolled) #nav .dropdown-menu li a:hover{ background:rgba(255,255,255,0.10) !important; color:#fff !important; } /* el violeta de marca se apaga sobre fondo oscuro: se aclara al tono que ya usa el sitio para iconos en oscuro */ body:not(.login):not(.nb-claro):not(.nb-scrolled) #nav .dropdown-menu li a i, body:not(.login):not(.nb-claro):not(.nb-scrolled) #nav .dropdown-menu li a .fa, body:not(.login):not(.nb-claro):not(.nb-scrolled) #nav .dropdown-menu li a .fas, body:not(.login):not(.nb-claro):not(.nb-scrolled) #nav .dropdown-menu li a .far, body:not(.login):not(.nb-claro):not(.nb-scrolled) #nav .dropdown-menu li a .fab{ color:#A594FF !important; } body:not(.login):not(.nb-claro):not(.nb-scrolled) #nav .dropdown-menu > li > a:hover i{ color:var(--nb-pink) !important; } body:not(.login):not(.nb-claro):not(.nb-scrolled) #nav .dropdown-menu .divider, body:not(.login):not(.nb-claro):not(.nb-scrolled) #nav .dropdown-menu .dropdown-divider{ background:rgba(255,255,255,0.14) !important; } /* ── carrito y usuario ────────────────────────────────────── */ #nav .user_icon > a, #nav .Secondary_Navbar-Account > a{ border:1px solid var(--nb-line-2) !important; border-radius:50% !important; width:40px; height:40px; display:inline-flex !important; align-items:center; justify-content:center; color:var(--nb-ink) !important; transition:border-color 0.22s ease, color 0.22s ease, transform 0.22s ease; } #nav .user_icon > a:hover{ border-color:var(--nb-violet) !important; color:var(--nb-violet-aa) !important; transform:translateY(-1px); } #nav .cart-icon a, #nav [class*="Cart"] > a{ color:var(--nb-ink) !important; transition:color 0.22s ease; } #nav .cart-icon a:hover{color:var(--nb-violet-aa) !important} /* ── el boton de menu en movil ────────────────────────────── */ .navbar-toggler{ border:0 !important; color:var(--nb-ink) !important; padding:8px !important; border-radius:10px; transition:background 0.2s ease; } .navbar-toggler:hover{background:var(--nb-paper-2) !important} .navbar-toggler:focus{box-shadow:none !important; outline:none} /* ══ panel lateral en movil ════════════════════════════════ */ /* Croster lo pinta en #edf0f5 y lo deja en 270 px fijos. */ .navbar-side{ background:var(--nb-night) !important; width:min(86vw, 340px) !important; border-right:1px solid rgba(255,255,255,0.08); box-shadow:0 0 60px rgba(0,0,0,0.5); /* EL TEMA LO ESCONDE CON `translateX(-280px)`, UN VALOR FIJO calculado para su ancho original de 270 px. Al ensancharlo a 335 quedaban 55 px asomando por la izquierda EN TODAS LAS PAGINAS, con el panel cerrado. Con -100% se esconde entero sea cual sea el ancho. La clase que lo abre (`.display`) lo devuelve a 0. */ transition:transform 0.3s ease !important; /* PANEL FLOTANTE: separado de la barra y de los bordes, como una tarjeta. La altura de la barra la publica el script en `--nb-nav-h`; aqui un desajuste de unos pixeles no se nota, porque la separacion es intencionada —al contrario que cuando iba pegado, donde cualquier desfase se veia como una franja blanca—. */ top:calc(var(--nb-nav-h, 78px) + 12px) !important; left:12px !important; right:auto !important; width:min(84vw, 330px) !important; height:auto !important; max-height:calc(100dvh - var(--nb-nav-h, 78px) - 24px) !important; border-radius:18px !important; border:1px solid rgba(255,255,255,0.10) !important; box-shadow:0 26px 64px -18px rgba(0,0,0,0.7), 0 2px 8px rgba(0,0,0,0.4) !important; z-index:1020 !important; } /* ── EL VELO DEL MENU MOVIL ───────────────────────────────── El panel abierto se recortaba contra la pagina viva: se veian el buscador de dominios y los chips de extensiones justo al lado, y los dos competian. Faltaba el velo, que el tema no trae. NO puede colgar del propio panel: `.navbar-side` lleva `transform`, y un elemento con transform crea contenedor para sus descendientes `position:fixed` —el velo quedaria atrapado dentro del panel en vez de cubrir la pantalla—. Por eso va en la raiz, con una clase que pone el script al abrirse el menu. `pointer-events:none` a proposito: el tema no cierra el menu al tocar fuera, y un velo que traga el toque sin cerrar nada seria peor que no tenerlo. */ html.nb-menu-abierto::before{ content:""; position:fixed; inset:0; z-index:1010; background:rgba(6,5,14,0.62); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); pointer-events:none; animation:nb-velo 0.25s ease both; } @keyframes nb-velo{from{opacity:0} to{opacity:1}} @media (prefers-reduced-motion:reduce){ html.nb-menu-abierto::before{animation:none} } @media (min-width:992px){ html.nb-menu-abierto::before{display:none} } /* ── EL "AREA DE CLIENTES" DUPLICADO DEL PANEL MOVIL ──────── El panel movil listaba DOS entradas para lo mismo: li.home-item "Área de Clientes" -> /clientarea.php li.dropdown-megamenu "Área de Cliente" -> las cinco columnas La primera NO viene del gestor de menus —no lleva `data-menuitemname`—: la escribe la plantilla del tema como enlace fijo. La segunda es el megamenu, que ya contiene "Panel Principal", o sea el MISMO destino, ademas de Netebu Cloud, Dominios, Hosting y Facturacion. Sobra la del tema. Se oculta por CSS y no en el gestor porque ahi no aparece: no es suya. (La tilde que le faltaba al megamenu ya se corrigio en mod_adminpanel_cmegamenu, relid 147.) */ .navbar-side li.home-item{display:none !important} /* al cerrarse tiene que salirse del todo, contando ese margen */ .navbar-side{transform:translateX(calc(-100% - 16px)) !important} .navbar-side.display, .navbar-side.show, .navbar-side.open{transform:translateX(0) !important} /* slimScroll fija una altura al vuelo —378 px— y el panel se quedaba a media pantalla. Ademas su gestion de scroll compite con la del navegador y el submenu de Soporte no se podia recorrer. Se aparta: el scroll lo lleva el panel entero, que es lo simple y lo que funciona en cualquier movil. */ .navbar-side{ overflow-y:auto !important; overflow-x:hidden !important; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; } .navbar-side .slimScrollDiv, .navbar-side .sidebar-scroll{ width:100% !important; background:transparent !important; height:auto !important; max-height:none !important; overflow:visible !important; } .navbar-side .slimScrollBar, .navbar-side .slimScrollRail{display:none !important} /* aire al final para que el ultimo submenu no quede pegado abajo */ .navbar-side .side-nav{padding-bottom:40px !important} .navbar-side .media-search{ background:transparent !important; border-bottom:1px solid rgba(255,255,255,0.09) !important; padding:14px 16px !important; } /* El input del panel es `.input-menu`, no `.form-control`, y el tema lo pinta con !important: hace falta mas especificidad. Se queda BLANCO: sobre el panel oscuro destaca y se ve mejor que translucido, que es como estaba y no acababa de leerse. */ nav.navbar-side .media-search input.input-menu, .navbar-side .input-menu, .navbar-side .media-search input, .navbar-side .media-search .form-control, .navbar-side .input-icon input, .navbar-side input[type="text"], .navbar-side input[type="search"]{ background:var(--nb-paper) !important; border:1px solid var(--nb-line-2) !important; border-radius:11px !important; color:var(--nb-ink) !important; font-family:var(--nb-ff-b); height:44px; } .navbar-side .input-menu::placeholder, .navbar-side .media-search .form-control::placeholder{color:var(--nb-ink-3) !important} .navbar-side .media-search .fa-search{color:var(--nb-ink-3) !important} .navbar-side .media-search i{color:var(--nb-on-3) !important} /* Croster pinta los
  • y sus enlaces con fondos CLAROS propios (#edf0f5 y blanco). Con el panel en oscuro, el texto blanco caia sobre esos fondos claros y quedaba ilegible. Hay que apagarlos todos, no solo el del panel. */ .navbar-side .side-nav, .navbar-side .side-nav > li, .navbar-side .side-nav > li > a, .navbar-side .side-nav ul, .navbar-side .side-nav ul li, .navbar-side .side-nav ul li a, .navbar-side .panel, .navbar-side .panel-collapse, .navbar-side .panel-body, .navbar-side .card, .navbar-side .list-group-item{ background-color:transparent !important; background-image:none !important; box-shadow:none !important; border-color:transparent; } .navbar-side .side-nav{padding:6px 10px !important} .navbar-side .side-nav > li{ border-bottom:1px solid rgba(255,255,255,0.07) !important; /* El
  • de Soporte lleva ademas `col-md-2`, que le mete relleno lateral de rejilla y lo desalinea respecto a los otros cinco. */ padding-left:0 !important; padding-right:0 !important; max-width:none !important; flex:none !important; } .navbar-side .side-nav > li:last-child{border-bottom:0 !important} .navbar-side .side-nav > li > a{ font-family:var(--nb-ff-d) !important; font-size:1.1rem !important; font-weight:600 !important; color:var(--nb-on) !important; padding:15px 12px !important; border-radius:11px; display:flex !important; align-items:center; justify-content:space-between; transition:background 0.2s ease, color 0.2s ease; } .navbar-side .side-nav > li > a:hover, .navbar-side .side-nav > li.active > a{ background-color:rgba(255,255,255,0.07) !important; color:var(--nb-on) !important; } .navbar-side .side-nav ul{background-color:rgba(255,255,255,0.03) !important} /* Las flechas apuntan a la izquierda («<») cuando lo que hacen es abrir hacia abajo. Se giran 90 grados y giran otra vez al abrir. */ .navbar-side .side-nav > li > a .arrow, .navbar-side .side-nav > li > a [class*="fa-angle"], .navbar-side .side-nav > li > a [class*="fa-chevron"]{ color:var(--nb-on-3) !important; font-size:0.95rem; transition:transform 0.24s ease, color 0.24s ease; transform:rotate(-90deg); } .navbar-side .side-nav > li.active > a .arrow, .navbar-side .side-nav > li[aria-expanded="true"] > a .arrow{ transform:rotate(90deg); color:var(--nb-violet) !important; } /* submenus del panel */ .navbar-side .side-nav ul{ background:rgba(255,255,255,0.03) !important; border-radius:11px; margin:0 0 8px !important; padding:5px 0 !important; list-style:none; } .navbar-side .side-nav ul li a{ font-family:var(--nb-ff-b) !important; font-size:1.02rem !important; color:var(--nb-on-2) !important; padding:10px 14px 10px 24px !important; display:flex; align-items:center; gap:10px; transition:color 0.2s ease, padding-left 0.2s ease; } .navbar-side .side-nav ul li a:hover{ color:var(--nb-on) !important; padding-left:28px !important; } .navbar-side .side-nav ul li a i{color:var(--nb-violet) !important; width:16px; text-align:center} .navbar-side .home-item > a{color:var(--nb-violet-aa) !important} @media (prefers-reduced-motion:reduce){ #nav *, .navbar-side *{transition:none !important} } /* ══ EL CRISTAL, EN UN PSEUDOELEMENTO ═══════════════════════ Va al FINAL de la hoja a proposito: tiene que ganar por orden a todas las reglas de `background` de los estados anteriores. EL PORQUE. Un elemento con `backdrop-filter` se convierte en BACKDROP ROOT: sus descendientes solo pueden desenfocar lo que se pinta dentro de el, no la pagina. Los desplegables cuelgan fuera de la barra, asi que su backdrop root ahi esta vacio y el desenfoque no hacia nada. Medido: la nitidez del interior del menu daba 63,4 —el texto de la seccion de debajo se leia entero a traves del menu—, justo lo que habia que evitar. Moviendo el cristal a un `::after`, `#nav` ya no filtra nada y deja de ser backdrop root; el que filtra es el pseudoelemento, que no es ancestro de los menus. Los desplegables recuperan su propio desenfoque. `z-index:-1` lo pinta bajo el contenido de la barra pero dentro de su contexto de apilamiento, asi que no se va detras de la pagina. Solo en escritorio: en movil no hay cristal ni menus flotantes. */ @media (min-width:992px){ #nav.cros-navbar, body.nb-scrolled #nav.cros-navbar, body.nb-hero #nav.cros-navbar, body:not(.login):not(.nb-claro):not(.nb-scrolled) #nav.cros-navbar, body.nb-hero.nb-scrolled #nav.cros-navbar{ background:transparent !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; } #nav.cros-navbar::after{ content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; pointer-events:none; background:rgba(255,255,255,0.86); backdrop-filter:saturate(180%) blur(26px); -webkit-backdrop-filter:saturate(180%) blur(26px); transition:background 0.3s ease; } body:not(.login):not(.nb-claro):not(.nb-scrolled) #nav.cros-navbar::after{ background:rgba(255,255,255,0.06); } /* sin `backdrop-filter` el cristal seria una ventana: mejor solido */ @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ #nav.cros-navbar::after{background:var(--nb-paper)} body:not(.login):not(.nb-claro):not(.nb-scrolled) #nav.cros-navbar::after{ background:rgba(20,17,31,0.55); } } } /* ══ EL ULTIMO ELEMENTO DEL MENU ════════════════════════════ "Soporte" viene con `col-md-2` desde el gestor de menus: una clase de rejilla de Bootstrap que se colo al montarlo. Le pone `flex:0 0 16.6667%` —sin encogimiento— y 15 px de relleno a cada lado. Ese porcentaje se calcula sobre el ancho del