/* * La barra de navegación de netebu.com, servida por el tema. * * POR QUÉ EXISTE ESTE FICHERO. El aspecto de la barra lo inyectaba * `includes/hooks/netebu_navbar.php` desde fuera del tema, y por eso el * 81 % de sus bloques de reglas llevaban `!important`: un hook no puede ganarle a la * hoja del tema por orden, solo por especificidad. Desde que * `templates/netebu` es nuestro, sí se puede ganar por orden, y este * fichero se carga DESPUÉS de `themes/style.min.css`. * * ESE HOOK YA NO EXISTE. Se retiró el 03-09-2026, cuando su última regla * acabó de mudarse aquí: empezó con 1.604 líneas y 367 `!important` y * terminó sin una sola. Su JavaScript vive en `assets/js/netebu-barra.js`. * * LA REGLA QUE GOBIERNA ESTE FICHERO. Por cada `!important` que se * escriba aquí hay que anotar contra qué regla concreta pelea, y abrir la * pregunta de si esa regla debería seguir existiendo. El objetivo * declarado es terminar con cero. * * DÓNDE SE ENLAZA, Y POR QUÉ IMPORTA. En `header.tpl`, la última del * ``, DESPUÉS de `{$headoutput}`. Los hooks inyectan su CSS ahí, así * que un `` puesto en `includes/head.tpl` cargaba antes que ellos: * medido, el tema en el byte 1.834 y el hook en el 10.366. Desde el final * ganamos por orden a los dos. * * CARGAR DESPUÉS NO BASTA, Y ESTO COSTÓ UN DESPLIEGUE. El hook escribe * `body:not(.login):not(.nb-claro):not(.nb-scrolled) #nav.cros-navbar`, * y sus tres `:not()` cuentan como tres clases: (1,4,1). Contra un * `body.nb-hero #nav.cros-navbar`, que es (1,3,1), gana el hook por * especificidad aunque carguemos después — y si además lleva * `!important`, no hay orden que valga. Por eso los selectores de aquí * llevan `.nb-hero:not(.login):not(.nb-claro)`: tres clases, las mismas * que sus tres `:not()`. Empatando en especificidad, decide el orden, y * el orden ya es nuestro. Cuando el bloque correspondiente se retire del * hook, estos `:not()` y estos `!important` se van con él. */ /* LOS TOKENS VAN EN LOS TRES SELECTORES A LA VEZ, Y NO ES ADORNO. `:root` los pone a disposición de todo el documento. `#nav` y `.navbar-side` los blindan dentro de la barra, y eso es lo que hacía el hook antes de retirarse. POR QUÉ HACE FALTA EL BLINDAJE: otros hooks declaran ESTOS MISMOS nombres con OTROS valores en su propio `:root`, porque su bloque es oscuro. `netebu_footer.php` y `netebu_webmail.php` ponen `--nb-ink:#F2F3FB` —tinta blanca— y `--nb-line` en un blanco translúcido. Hoy esta hoja carga la última y gana por orden, pero un hook nuevo que inyecte en `ClientAreaFooterOutput` cargaría después y dejaría la barra con la tinta del pie: texto blanco sobre barra blanca. Un `#nav` con id gana a cualquier `:root`, cargue cuando cargue, y eso no depende de que nadie recuerde esta nota. */ :root, #nav, .navbar-side { /* Marca. El violeta AA es el que pasa contraste sobre papel: el violeta puro se queda en 4,46:1 y este llega a 6,2:1. */ --nb-blue: #4A90D9; --nb-violet: #7B5CF6; --nb-pink: #E84098; --nb-violet-aa: #6B48F2; --nb-grad: linear-gradient(135deg, #4A90D9 0%, #7B5CF6 50%, #E84098 100%); /* Tinta sobre fondo claro. */ --nb-ink: #14111F; --nb-ink-2: #4C4560; --nb-ink-3: #726C85; /* Papel y filos. */ --nb-paper: #FFFFFF; --nb-paper-2: #FAF8FE; --nb-line: #E9E4F3; --nb-line-2: #D8D0EC; /* Noche: el fondo de las cabeceras oscuras y del panel lateral. */ --nb-night: #0B0A16; /* Tinta sobre fondo oscuro. */ --nb-on: #F2F3FB; --nb-on-2: #B9BEDD; --nb-on-3: #8E94BC; /* Tipografía. Las carga `netebu_fuentes.php` en todo el sitio. */ --nb-ff-display: "Outfit", "Trebuchet MS", system-ui, sans-serif; --nb-ff-body: "Figtree", "Helvetica Neue", Arial, sans-serif; /* PUENTE HASTA F6, Y POR ESO ESTÁN DUPLICADOS. El hook declara sus tokens en `#nav, .navbar-side`, que gana a este `:root` para todo lo que cuelga de la barra. Mientras el hook siga vivo, un bloque migrado que use `--nb-ff-display` cambiaría la pila de respaldo —la del hook no lleva Trebuchet— y movería el `font-family` calculado sin que nadie lo haya pedido. Así que lo migrado usa los nombres del hook y sus valores exactos, y aquí quedan declarados para el día en que el hook desaparezca. En F6 se unifican los dos juegos y estos cinco se borran. */ --nb-ff-d: "Outfit", system-ui, -apple-system, sans-serif; --nb-ff-b: "Figtree", system-ui, -apple-system, sans-serif; --nb-night-2: #141227; --nb-night-3: #1E1B33; --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%); } /* ══════════════════════════════════════════════════════════════════ LA BARRA, Y LA ISLA (F3.3) Migrado del hook `netebu_navbar.php`. De los 40 `!important` que traía el bloque sobreviven DOS propiedades, justificadas abajo. El resto sobraban: se comprobó en el navegador, propiedad por propiedad, quién declara cada una y con qué fuerza. LO QUE SE MIDIÓ, porque «lo quito y a ver» no es un método: propiedad rival más fuerte de Croster ¿pierde? ─────────────── ───────────────────────────── ──────── background .cros-navbar (0,1,0) sí position .navbar (0,1,0) sí box-shadow .cros-navbar !important (0,1,0) NO ◄ móvil border-radius .cros-navbar !important (0,1,0) NO ◄ padding-top nadie — margin-top body (0,0,1) sí color (enlaces) .cros-navbar .navbar-nav li a (0,2,2) sí display (logo) body .logo-dark (0,1,1) sí Todas nuestras reglas llevan `#nav`, así que un id contra clases: ganan por especificidad y esta hoja carga después. Los dos que sí necesitan `!important` son `border-radius` y `box-shadow`, porque Croster los declara con `!important`, y contra eso no hay especificidad que valga. Y AQUÍ HAY UNA LECCIÓN QUE COSTÓ UN DESPLIEGUE. La primera versión de esta tabla decía que `box-shadow` no lo necesitaba, porque el interrogatorio se hizo SOLO a 1600 px. El `!important` de Croster está dentro de un media query de móvil, así que en escritorio no aparece. Se desplegó, y la barra se quedó sin sombra en los tres anchos pequeños —60 medidas del oráculo—; en escritorio, perfecta. Preguntar quién manda hay que hacerlo en TODOS los anchos: una regla que no existe a 1600 px puede estar mandando a 390. LO QUE NO SE MIGRA AQUÍ. Las reglas de tinta blanca del hook —`body:not(.login):not(.nb-claro):not(.nb-scrolled) #nav …`— NO se traen: ya las cubre, con más especificidad, el bloque de scroll de más arriba. Se comprobó en las diez páginas reales del sitio y con sesión de cliente que `nb-hero` y `nb-claro` son EXCLUYENTES —toda página con barra lleva una, nunca ninguna ni las dos—, así que `:not(.nb-claro)` y `.nb-hero` seleccionan el mismo conjunto. Traerlas sería duplicar la misma decisión en dos sitios, que es como se rompió el fundido. ══════════════════════════════════════════════════════════════════ */ /* ── la barra ──────────────────────────────────────────────────── */ /* AQUÍ HUBO UN `backdrop-filter` Y HUBO QUE QUITARLO. Crea un CONTEXTO DE APILAMIENTO propio —igual que `transform`, `filter` u `opacity` menor que 1—, y eso metía TODA la barra, desplegables incluidos, por debajo del contenido: el menú de Hosting quedaba tapado por `.hero-in` en la portada, por el banner en hosting, por el `h1` en SSL. Subir el z-index a 1030 NO lo arregló: el contexto se crea igual y el menú no puede escapar de él. El cristal acabó en un `::after`, al final de este bloque. */ #nav.cros-navbar { background: var(--nb-paper); /* 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, así 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 pone el script del hook. */ position: fixed; top: 0; left: 0; right: 0; z-index: 1030; padding-top: 11px; padding-bottom: 11px; border-bottom: 1px solid var(--nb-line); box-shadow: 0 1px 2px rgba(20, 17, 31, .04) !important; /* Croster: none !important en móvil */ /* La transición completa. En el hook estaba declarada dos veces —primero solo `box-shadow`, luego la lista entera— y la segunda anulaba a la primera por ser shorthand. Aquí va una sola vez. */ transition: background .3s ease, border-color .3s ease, border-radius .3s ease, box-shadow .3s ease, left .3s ease, right .3s ease, top .3s 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, .05), 0 10px 30px -14px rgba(20, 17, 31, .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. El desenfoque sube a 26 px y la saturación a 180% para que lo de debajo se insinúe con su color y no como una mancha. En móvil NO: el panel lateral se apoya en esta barra y desenfocar un fondo en movimiento cuesta batería sin aportar nada. */ @media (min-width: 992px) { #nav.cros-navbar { background: rgba(255, 255, 255, .86); backdrop-filter: saturate(180%) blur(26px); -webkit-backdrop-filter: saturate(180%) blur(26px); } body.nb-scrolled #nav.cros-navbar { background: rgba(255, 255, 255, .86); } } /* 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); } } /* ── el modo isla ──────────────────────────────────────────────── */ /* Arriba del todo, y solo en las páginas con cabecera oscura debajo, la barra se despega de los bordes y se vuelve translúcida: se integra con el hero y el logo pasa a su versión blanca. Al bajar recupera el fondo sólido y el logo en color. POR QUÉ NO EN TODAS: el script marca `body.nb-hero` solo cuando encuentra una de las cabeceras oscuras conocidas, así que no se decide muestreando colores —que falla con imágenes— sino por la estructura real de la página. */ /* Croster declara `body{margin-top:57px}` SOLO EN MÓVIL 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; } /* LA FORMA DE ISLA SE MANTIENE SIEMPRE. Lo único que cambia al bajar es el color: de translúcida sobre el hero a blanca y sólida. Antes la barra recuperaba el ancho completo al hacer scroll y se perdía el efecto; así se conserva de arriba abajo. */ body.nb-hero #nav.cros-navbar { /* EL ÚNICO `!important` DE ESTE BLOQUE, Y NO ES PEREZA. El lleva la clase `no-radius` del tema y Croster declara `.cros-navbar{border-radius:0 !important}`. Contra un !important no hay especificidad que valga: hace falta otro. Lo correcto sería quitarlo del LESS de Croster, pero el LESS ya no tiene dueño y recompilarlo afecta a todo el sitio. */ border-radius: 18px !important; left: 16px; right: 16px; max-width: 1400px; margin-inline: auto; top: 14px; } /* arriba del todo: translúcida, integrada con la cabecera. El fondo y el filo los conduce el bloque de scroll de más arriba; aquí queda lo que no se anima: el desenfoque y la sombra. */ body:not(.login):not(.nb-claro):not(.nb-scrolled) #nav.cros-navbar { background: rgba(255, 255, 255, .06); backdrop-filter: saturate(150%) blur(16px); -webkit-backdrop-filter: saturate(150%) blur(16px); border: 1px solid rgba(255, 255, 255, .16); box-shadow: 0 18px 50px -22px rgba(0, 0, 0, .75) !important; } /* al bajar: la misma isla, ahora blanca. En MÓVIL casi opaca, porque allí no hay `backdrop-filter` y sin desenfoque el contenido se vería nítido a través. */ body.nb-hero.nb-scrolled #nav.cros-navbar { background: rgba(255, 255, 255, .97); border: 1px solid var(--nb-line); box-shadow: 0 2px 6px rgba(20, 17, 31, .06), 0 18px 44px -20px rgba(20, 17, 31, .34) !important; } @media (min-width: 992px) { body.nb-hero.nb-scrolled #nav.cros-navbar { background: rgba(255, 255, 255, .86); } } /* EL LOGO. Croster ya trae las dos versiones en el HTML, pero la de modo oscuro —logonetebudarkmode.webp— viene con FONDO SÓLIDO #1D1D1D, sin transparencia: sobre la isla se veía su recuadro. Se generó una versión 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; } body:not(.login):not(.nb-claro):not(.nb-scrolled) #nav .logo-dark { display: block; } #nav .logo-light, #nav .logo-dark { transition: opacity .25s ease; } /* en móvil 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; /* mismo motivo que arriba */ } } /* ── lo que pasa al pasar el ratón, arriba del todo ────────────── */ /* SEPARADO A PROPÓSITO. Estas dos reglas no las ve la simulación —mide el estado en reposo, sin puntero encima— así que se comprueban a mano en el navegador. LLEVABAN `!important` HASTA F3.4, y ya no: el hover base vivía en el hook con `#nav .navbar-nav > li > a:hover{color:… !important}` y no había especificidad que valiera. Migrado ese bloque aquí abajo, sin `!important`, estas (1,5,3) le ganan a su (1,2,2) por las buenas. La deuda tenía fecha y se ha pagado. */ 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; background: rgba(255, 255, 255, .10); } body:not(.login):not(.nb-claro):not(.nb-scrolled) .navbar-toggler:hover { background: rgba(255, 255, 255, .10); } /* ── el cristal, en un pseudoelemento ──────────────────────────── */ /* ESTE BLOQUE VA EL ÚLTIMO DE LOS TRES, Y EL ORDEN ES LA REGLA. No lleva `!important`: gana porque su lista de selectores EMPATA en especificidad con las reglas de fondo de arriba —(1,1,0), (1,2,1) y (1,4,1), una por cada estado— y va después. Si alguien mueve este bloque por encima de ellas, la barra de escritorio se vuelve blanca opaca y el cristal desaparece. No se mueve. EL PORQUÉ DEL PSEUDOELEMENTO. Un elemento con `backdrop-filter` se convierte en BACKDROP ROOT: sus descendientes solo pueden desenfocar lo que se pinta dentro de él, no la página. Los desplegables cuelgan fuera de la barra, así que su backdrop root ahí estaba vacío y el desenfoque no hacía nada. Medido: la nitidez del interior del menú daba 63,4 —el texto de la sección de debajo se leía entero a través del menú—, justo lo que había que evitar. Moviéndolo a un `::after`, `#nav` ya no filtra y deja de ser backdrop root; el que filtra es el pseudoelemento, que no es ancestro de los menús. `z-index:-1` lo pinta bajo el contenido de la barra pero dentro de su contexto de apilamiento, así que no se va detrás de la página. Solo en escritorio: en móvil no hay menús 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; backdrop-filter: none; -webkit-backdrop-filter: none; } #nav.cros-navbar::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; background: rgba(255, 255, 255, .86); backdrop-filter: saturate(180%) blur(26px); -webkit-backdrop-filter: saturate(180%) blur(26px); transition: background .3s ease; } body:not(.login):not(.nb-claro):not(.nb-scrolled) #nav.cros-navbar::after { background: rgba(255, 255, 255, .06); } /* sin `backdrop-filter` el cristal sería una ventana: mejor sólido */ @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, .55); } } } /* ══════════════════════════════════════════════════════════════════ LOS ENLACES Y SUS DESPLEGABLES (F3.4) Migrado del hook. Aquí NO queda ni un `!important`, y no es que se hayan quitado a ojo: se preguntó al navegador quién declara cada propiedad, a 390 y a 1600 px con el menú abierto, y Croster no usa `!important` en ninguna. Su rival más fuerte es `.cros-navbar .navbar-header .secondary-menu-mobile.nav li a` —(0,5,2)—, y un `#nav …` con id le gana siempre. EL HOOK DECLARABA ESTO DOS VECES, y solo una ganaba. Los iconos y el hover del desplegable estaban escritos en dos sitios separados por 130 líneas, y el segundo pisaba al primero por orden. Lo que quedaba muerto, medido en el navegador en diez combinaciones de ancho y estado: · icono del desplegable: var(--nb-violet) #7B5CF6 → ganaba #5B3FD6 · hover, fondo: var(--nb-paper-2) → ganaba rgba(123,92,246,.15) · hover, tinta: var(--nb-violet-aa) → ganaba #4C2FC0 · hover en escritorio: rgba(123,92,246,.09) → ganaba el .15 de fuera Aquí va solo lo que estaba VIVO. Dejar las dos versiones invita a que alguien ajuste la muerta y no entienda por qué no pasa nada. ══════════════════════════════════════════════════════════════════ */ /* ── los enlaces de primer nivel ───────────────────────────────── */ #nav .navbar-nav > li > a { font-family: var(--nb-ff-d); font-size: 1.055rem; font-weight: 600; color: var(--nb-ink); 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 sí —el de Soporte y el del carrito son más cortos— y el fondo salía 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); background: transparent; } /* la flechita del desplegable */ #nav .navbar-nav > li > a .caret, #nav .navbar-nav > li > a:after { color: var(--nb-ink-3); transition: transform 0.22s ease; } #nav .navbar-nav > li:hover > a:after { transform: rotate(180deg); } /* ── los desplegables ──────────────────────────────────────────── */ /* El tema los deja cuadrados, sin sombra y pegados a la barra. */ #nav .dropdown-menu { background: var(--nb-paper); border: 1px solid var(--nb-line); border-radius: 14px; /* El margen se cuenta desde el ENLACE, no desde la barra, y la barra tiene 11 px de relleno inferior: con 9 px el menú acababa 3 px METIDO DENTRO de ella. Se suma ese relleno más el aire que se quiere de verdad. */ padding: 8px; margin-top: 23px; min-width: 212px; box-shadow: 0 2px 4px rgba(20, 17, 31, 0.05), 0 20px 44px -18px rgba(20, 17, 31, 0.26); } /* Ese margen deja una franja muerta entre el enlace y el menú: al bajar el ratón hacia el submenú se pierde el hover y el menú se cierra en la cara. Un puente invisible la cubre. Nada de `overflow:hidden` en el menú, o recortaría 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); font-size: 1rem; font-weight: 500; color: var(--nb-ink-2); padding: 10px 14px; border-radius: 9px; display: flex; align-items: center; gap: 10px; transition: background 0.2s ease, color 0.2s ease, padding-left 0.2s ease; } /* El violeta de marca puro se queda en 4,46:1 sobre blanco: no llega a AA y en un icono pequeño se ve lavado. Se baja a un violeta más profundo —6,2:1— que sigue siendo de la familia. */ #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: #5B3FD6; font-size: 0.98rem; transition: color 0.2s ease; } #nav .dropdown-menu > li > a:hover, #nav .dropdown-menu li a:hover { background: rgba(123, 92, 246, 0.15); color: #4C2FC0; padding-left: 17px; } #nav .dropdown-menu > li > a:hover i { color: var(--nb-pink); } #nav .dropdown-menu .divider, #nav .dropdown-menu .dropdown-divider { background: var(--nb-line); margin: 6px 4px; } /* ── el mismo cristal que la barra, solo en escritorio ─────────── */ /* La barra y su menú tienen que ser LA MISMA superficie: si la barra deja pasar el fondo y el menú no, el menú parece pegado encima en vez de desplegado desde ella. Solo en escritorio: en móvil los submenús viven dentro del panel lateral, que es opaco y oscuro y tiene sus propias reglas. Y sin `backdrop-filter` el texto de la página se leería a través del menú, que es justo lo que hay que evitar. */ @media (min-width: 992px) { #nav .dropdown-menu { background: rgba(255, 255, 255, 0.86); backdrop-filter: saturate(180%) blur(26px); -webkit-backdrop-filter: saturate(180%) blur(26px); border-color: rgba(233, 228, 243, 0.8); } } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { #nav .dropdown-menu { background: var(--nb-paper); } } /* ── 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 7% que lleva la barra. Sin el velo no sale: muestreado el hero de la home bajo el menú de Dominios, sus píxeles más claros llegan a #6152C0 y ahí el blanco al 6% deja el texto en 4,82:1 —pasa AA por los pelos, y en otro hero más claro no pasaría—. Con el velo al 0,42 ese peor caso sube a 7,5:1 y el menú sigue dejando pasar el hero casi como la barra. Al 0,55 daba 11,7:1 pero se veía más 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); border: 1px solid rgba(255, 255, 255, 0.16); box-shadow: 0 18px 50px -22px rgba(0, 0, 0, 0.75); } 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); } /* el padding-left del hover lo pone la regla clara de arriba; aquí solo cambian los colores */ 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); color: #fff; } /* 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; } body:not(.login):not(.nb-claro):not(.nb-scrolled) #nav .dropdown-menu > li > a:hover i { color: var(--nb-pink); } 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); } /* ══════════════════════════════════════════════════════════════════ EL ÁREA DE CLIENTE: MEGAMENÚ, SALIR, SEPARADOR Y CAMPANA (F3.5-F3.6) Migrado del hook. De los ~130 `!important` que traían estos bloques quedan los que Croster y Bootstrap OBLIGAN a conservar, y cada uno lleva al lado contra qué pelea. Son estos, y se sacaron preguntando al navegador CON SESIÓN —el megamenú y la campana solo existen con ella— a 390, 1280 y 1600 px, con `:hover` forzado: Croster .dropdown-menu.dropdown-mega .mega-menu ul li a padding:0 Croster .mega-menu ul li a:hover background-color:transparent · color:#8f1faf Croster .dropdown-menu.dropdown-mega .html-item a padding:0 · background-color:transparent Croster .cros-navbar .dropdown-scroll li a color:#211b65 · font-size:14px Croster .cros-navbar .dropdown-tasks li a:hover background-color:#edf0f5 Croster .cros-navbar .dropdown-scroll li a .btn padding:4px 10px Bootstrap .text-info / .text-danger / .text-warning color Croster .container (solo móvil) width · max-width:100% Y UNA LECCIÓN DE MÉTODO, porque la primera versión de esta lista tenía UNA entrada y era falsa. El interrogatorio preguntaba por `padding-top`, `background-color`, `margin-top`… y Croster declara los SHORTHANDS: `padding`, `background`, `margin`. El navegador lista cada declaración con el nombre tal cual se escribió, así que los `!important` en shorthands no aparecían. Y tampoco se forzaba `:hover`. Se desplegó a la simulación —no a producción— y salieron veintitrés diferencias con el morado de Croster asomando en el hover. Preguntar «quién manda» es preguntar por TODAS las declaraciones con `!important` que alcanzan al elemento, sin filtrar por propiedad, y con los pseudo-estados forzados. LO QUE NO SE PUEDE VERIFICAR MIDIENDO, y se dice aquí para que nadie se fíe de más: `.item-icon`, `a.item-heading` y `.badge` no existen hoy en el DOM —dependen de lo que haya en `mod_adminpanel_cmegamenu`— y la campana solo se pinta cuando WHMCS tiene alertas para el cliente. Esas reglas van LITERALES, sin consolidar, porque no hay forma de comprobar una consolidación. LO QUE SÍ SE CONSOLIDÓ, porque se midió antes y después en cuatro combinaciones de ancho y estado, con cincuenta propiedades cada una: el hook declaraba `.item-with-icons` tres veces, `h4.menu-name` dos, `.menu-small-box` dos y `.html-item` tres, en bloques escritos en días distintos que se iban pisando por orden. Aquí cada elemento está UNA vez, con los valores que de verdad ganaban. ══════════════════════════════════════════════════════════════════ */ /* ── el panel del megamenú ─────────────────────────────────────── */ /* Estructura real (core/includes/mega-menu.tpl): ul.dropdown-menu.dropdown-mega li > div.mega-menu > div.container > div.row div.menu-small-box <- una por columna div.item-with-icons span.item-icon > i h4.menu-name <- título de la columna ul.menu-list > li > a.nav-link > span.item Este panel mide ~1100×360 y heredaba el cristal de los desplegables normales, pensado para menús de 200 px. Con esa superficie, un velo al 42% deja leer TODA la página por debajo y el panel se vuelve ilegible. Un menú grande necesita fondo denso. */ #nav .dropdown-menu.dropdown-mega { background: rgba(255, 255, 255, 0.97); backdrop-filter: saturate(150%) blur(20px); -webkit-backdrop-filter: saturate(150%) blur(20px); border: 1px solid var(--nb-line); border-radius: 18px; padding: 10px; box-shadow: 0 4px 10px rgba(20, 17, 31, 0.06), 0 34px 80px -30px rgba(20, 17, 31, 0.42); } /* sobre cabecera oscura, el mismo tono que la isla pero DENSO */ body:not(.login):not(.nb-claro):not(.nb-scrolled) #nav .dropdown-menu.dropdown-mega { background: linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05)), rgba(11, 10, 22, 0.95); border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.88); } /* ── la rejilla ────────────────────────────────────────────────── */ #nav .dropdown-mega .mega-menu, #nav .dropdown-mega .mega-menu > .container { /* los dos `!important` del bloque: Croster pone `width:100% !important; max-width:100% !important` al `.container` en móvil */ width: 100% !important; max-width: none !important; padding: 0; margin: 0; } #nav .dropdown-mega .mega-menu > .container > .row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 6px 10px; margin: 0; width: 100%; } #nav .dropdown-mega .menu-small-box { display: flex; flex-direction: column; padding: 14px 14px 12px; margin: 0; max-width: none; flex: none; width: auto; border-radius: 12px; } /* ── la cabecera de cada columna ───────────────────────────────── */ /* mega-menu.tpl genera DOS variantes según si la columna enlaza a algún sitio: URI "#" -> div.item-with-icons URI real -> a.item-heading > div.item-with-icons.no-margin Ese envoltorio añadía 10 px por arriba y quitaba el margen inferior: su título, su línea y su enlace caían más abajo que los de las otras columnas. Se neutraliza el y se da a las dos variantes LA MISMA caja: misma altura mínima, mismo margen, mismo relleno. */ #nav .dropdown-mega a.item-heading { display: block; margin: 0; padding: 0; line-height: normal; text-decoration: none; border: 0; background: none; } #nav .dropdown-mega .item-with-icons, #nav .dropdown-mega .item-with-icons.no-margin, #nav .dropdown-mega a.item-heading .item-with-icons { display: flex; align-items: center; gap: 9px; min-height: 34px; margin: 0 0 10px; padding: 0 0 9px; border-bottom: 1px solid var(--nb-line); } #nav .dropdown-mega .item-icon { flex: 0 0 auto; display: inline-flex; align-items: center; line-height: 1; } #nav .dropdown-mega .item-icon i { color: var(--nb-violet-aa); font-size: 0.95rem; } #nav .dropdown-mega h4.menu-name { font-family: var(--nb-ff-d); font-weight: 700; font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--nb-ink-3); margin: 0; padding: 0; line-height: 1.2; flex: 1 1 auto; } #nav .dropdown-mega a.item-heading:hover h4.menu-name { color: var(--nb-violet-aa); } /* la misma cabecera, sobre cabecera oscura */ body:not(.login):not(.nb-claro):not(.nb-scrolled) #nav .dropdown-mega .item-with-icons, body:not(.login):not(.nb-claro):not(.nb-scrolled) #nav .dropdown-mega .item-with-icons.no-margin, body:not(.login):not(.nb-claro):not(.nb-scrolled) #nav .dropdown-mega a.item-heading .item-with-icons { border-bottom-color: rgba(255, 255, 255, 0.14); } body:not(.login):not(.nb-claro):not(.nb-scrolled) #nav .dropdown-mega .item-icon i { color: #A594FF; } /* La primera columna no usa `.item-with-icons` como las demás, sino `a.item-heading` envolviendo el título: el color de enlace del tema ganaba y salía en violeta apagado sobre fondo oscuro. Se nombra el