/* Capa decorativa de "Liquid Bubbles" — burbujas flotando de fondo. Solo se activa con (ver js/liquid-bubbles-preview.js). El vidrio esmerilado de nav/tarjetas/botones NO vive acá: se reutiliza tal cual de css/liquid-glass-preview.css, así que este archivo es chico a propósito y no toca ninguna de esas reglas. */ body.liquid-bubbles-preview .lgb-bubble-layer { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; } body.liquid-bubbles-preview .lgb-bubble { position: absolute; bottom: -10vh; left: var(--lgb-left, 50%); width: var(--lgb-size, 30px); height: var(--lgb-size, 30px); border-radius: 50%; background: radial-gradient(circle at 30% 28%, rgba(255, 255, 255, .9), rgba(255, 255, 255, .18) 55%, rgba(120, 180, 255, .08) 100%); box-shadow: inset 0 0 10px rgba(255, 255, 255, .55), inset 0 0 2px rgba(255, 255, 255, .9), 0 4px 16px rgba(70, 130, 220, .12); opacity: 0; animation-name: lgb-float; animation-duration: var(--lgb-duration, 18s); animation-delay: var(--lgb-delay, 0s); animation-timing-function: ease-in; animation-iteration-count: infinite; } @keyframes lgb-float { 0% { transform: translateY(0) translateX(0) scale(.85); opacity: 0; } 8% { opacity: .5; } 50% { transform: translateY(-55vh) translateX(var(--lgb-drift, 0px)) scale(1); } 92% { opacity: .45; } 100% { transform: translateY(-112vh) translateX(calc(var(--lgb-drift, 0px) * -1)) scale(1.08); opacity: 0; } } /* Modo liviano (mismo criterio automático que Liquid Glass: pocos núcleos, poca RAM, o "reducir movimiento" del sistema operativo) y prefers-reduced-motion: apagamos la ANIMACIÓN (que es lo caro), pero no ocultamos la burbuja entera — como la opacidad de .lgb-bubble arranca en 0 y solo la anima el @keyframes, apagar la animación sin más las dejaría invisibles para siempre. Acá las mostramos quietas, en una posición fija (--lgb-top en vez de bottom), igual que Liquid Glass no oculta sus tarjetas en modo liviano, solo les saca el blur. */ body.liquid-glass-lite.liquid-glass-lite.liquid-glass-lite.liquid-glass-lite .lgb-bubble { animation: none !important; bottom: auto !important; top: var(--lgb-top, 20%) !important; opacity: .4 !important; } @media (prefers-reduced-motion: reduce) { body.liquid-bubbles-preview .lgb-bubble { animation: none !important; bottom: auto !important; top: var(--lgb-top, 20%) !important; opacity: .4 !important; } } /* ========================================================================== Nav "gooey" — pestañas que se derraman como líquido al pasar el mouse. Solo escritorio (>768px). En móvil Liquid Bubbles sigue usando el mismo nav simple (hamburguesa + barra inferior) que ya usa Liquid Glass. Ver setupLiquidBubblesGooNav() en js/liquid-bubbles-preview.js. ========================================================================== */ body.liquid-bubbles-preview { --lgb-css-ready: 1; } html body.liquid-bubbles-preview .lg-nav-v3, html body.liquid-bubbles-preview.liquid-glass-preview.liquid-glass-preview .lg-nav-v3, body.liquid-bubbles-preview .lg-nav-v3, body.liquid-bubbles-preview .main-nav .lg-nav-v3, body.liquid-bubbles-preview .lg-v3-rail, body.liquid-bubbles-preview .lg-v3-bubble, body.liquid-bubbles-preview [data-lg-static] { display: none !important; } /* .nav-content usa CSS Grid: 1fr / minmax(min-content,max-content) / 1fr (marca / centro / acciones). Con .nav-center en display:none, si esta capa fuera position:absolute (fuera del flujo) el grid no la ve, no reserva espacio para ella, y la columna central se derrumba — marca y acciones terminan pegadas una a la otra, encima de las pestañas. Por eso acá SÍ participa del flujo normal (toma el lugar de .nav-center en el grid, igual que hace .lg-nav-v3 de Liquid Glass) y sus hijos (capas goo/labels) son position:absolute DENTRO de ella (que por eso lleva position:relative). */ body.liquid-bubbles-preview .lgb-goo-nav { position: relative; min-width: 600px; align-self: stretch; overflow: visible; pointer-events: none; /* Sin esto, .nav-actions (búsqueda/campana/usuario) pinta encima de esta capa: aparece después en el DOM de .nav-content, y varios de sus elementos heredan reglas de Liquid Glass con z-index !important de hasta 24 — hay que superar eso, no solo el z-index:auto por defecto. Sigue muy por debajo de dropdowns/modales reales (miles), así que no tapa nada de eso. */ z-index: 30 !important; } @media (max-width: 1330px) { body.liquid-bubbles-preview .lgb-goo-nav { min-width: 460px; } } body.liquid-bubbles-preview .lgb-goo-layer { position: absolute; left: 0; top: 0; width: 100%; height: 190px; filter: url(#lgb-goo); pointer-events: none; z-index: 1; } body.liquid-bubbles-preview .lgb-labels-layer { position: absolute; left: 0; top: 0; width: 100%; height: 190px; z-index: 2; pointer-events: none; } body.liquid-bubbles-preview .lgb-glass { position: absolute; /* Sin backdrop-filter a propósito: estos elementos ya viven dentro de una capa con un filtro SVG (el "goo") aplicado, y blur real + filtro SVG apilados en cada burbuja es de lo más caro que hay para el navegador — era la causa principal de que el nav se sintiera lento. El degradado + sombra de acá solos ya leen como vidrio sin ese costo. */ background: linear-gradient(135deg, rgba(255, 255, 255, .86), rgba(255, 255, 255, .48) 55%, rgba(255, 255, 255, .7)); border: 1px solid rgba(255, 255, 255, .65); box-shadow: inset 0 1.5px 1px rgba(255, 255, 255, .95), inset 0 -3px 8px rgba(255, 255, 255, .35), 0 10px 26px rgba(60, 80, 160, .16); } body.liquid-bubbles-preview .lgb-tab-bubble { border-radius: 18px; transition: background .3s; } body.liquid-bubbles-preview .lgb-tab-bubble.active { background: linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(255, 255, 255, .85)); box-shadow: inset 0 1.5px 1.5px rgba(255, 255, 255, .95), inset 0 -3px 8px rgba(255, 255, 255, .4), 0 10px 26px rgba(60, 80, 160, .22); } body.liquid-bubbles-preview .lgb-sub-bubble { border-radius: 18px; background: linear-gradient(135deg, rgba(255, 255, 255, .68), rgba(255, 255, 255, .34) 55%, rgba(255, 255, 255, .52)); transition: background .25s; } body.liquid-bubbles-preview .lgb-sub-bubble.active { background: linear-gradient(135deg, #5b8cff, #2b5fe3 70%); box-shadow: inset 0 1.5px 1.5px rgba(255, 255, 255, .55), inset 0 -4px 10px rgba(0, 20, 80, .22), 0 12px 30px rgba(43, 95, 227, .42); } body.liquid-bubbles-preview .lgb-connector { border-radius: 24px; background: linear-gradient(180deg, rgba(255, 255, 255, .72), rgba(255, 255, 255, .4)); border: 1px solid rgba(255, 255, 255, .7); box-shadow: inset 0 1.5px 1.5px rgba(255, 255, 255, .85), 0 16px 40px rgba(60, 80, 160, .16); opacity: 0; transition: opacity .35s ease; } body.liquid-bubbles-preview .lgb-connector.on { opacity: 1; } body.liquid-bubbles-preview .lgb-stem { border-radius: 999px; background: linear-gradient(180deg, rgba(255, 255, 255, .75), rgba(255, 255, 255, .4)); opacity: 0; transition: opacity .3s ease; } body.liquid-bubbles-preview .lgb-stem.on { opacity: 1; } body.liquid-bubbles-preview .lgb-mini { border-radius: 50%; background: linear-gradient(135deg, rgba(255, 255, 255, .78), rgba(255, 255, 255, .38)); } body.liquid-bubbles-preview .lgb-tab-label, body.liquid-bubbles-preview .lgb-sub-label { position: absolute; pointer-events: auto; background: none; border: 0; cursor: pointer; font-family: inherit; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; text-align: center; line-height: 1.1; color: #22315e; transition: color .25s; } body.liquid-bubbles-preview .lgb-tab-label .material-symbols-outlined { font-size: 21px; } body.liquid-bubbles-preview .lgb-tab-label .lgb-t { font-size: 12.5px; font-weight: 700; letter-spacing: .1px; white-space: nowrap; /* Red de seguridad: el JS ya recalcula el ancho de la pestaña según el nombre que muestra (ver measure() en el JS), pero si aun así no entrara del todo (nombre muy largo + poco espacio), que se corte con "…" en vez de montarse sobre el texto de la pestaña de al lado. */ max-width: 100%; overflow: hidden; text-overflow: ellipsis; } body.liquid-bubbles-preview .lgb-tab-label { max-width: 100%; } body.liquid-bubbles-preview .lgb-tab-label .lgb-chev { font-size: 15px; transition: transform .4s cubic-bezier(.34, 1.4, .64, 1); opacity: .6; } body.liquid-bubbles-preview .lgb-tab-label.open .lgb-chev { transform: rotate(180deg); } body.liquid-bubbles-preview .lgb-tab-label:active { transform: scale(.95); } body.liquid-bubbles-preview .lgb-sub-label { font-size: 12px; font-weight: 600; color: #22315e; } body.liquid-bubbles-preview .lgb-sub-label .material-symbols-outlined { font-size: 19px; } body.liquid-bubbles-preview .lgb-sub-label.active { color: #fff; font-weight: 700; } body.liquid-bubbles-preview .lgb-sub-label:active { transform: scale(.94); } /* Oculta el nav clásico simple mientras el nav "gooey" está armado. */ body.liquid-bubbles-preview .main-nav.lgb-goo-ready .nav-center { display: none !important; } /* Modo liviano: la interacción sigue funcionando igual (solo se resigna el splash de gotitas — ver isLite() en el JS). .lgb-glass ya no usa backdrop-filter en ningún modo, así que no hace falta nada más acá. */ /* ========================================================================== Móvil (≤768px): NO se usa el nav clásico (.nav-items/.nav-center) — TODA la app lo oculta en pantallas angostas y usa el cajón hamburguesa en su lugar (así es en cualquier estilo de nav, no es algo de Liquid Bubbles). Acá armamos nuestra propia fila de pestañas con scroll lateral real (.lgb-mobile-nav, ver setupLiquidBubblesMobileNav en el JS) — sin filtro SVG ni animaciones pesadas, para no repetir el problema de rendimiento que sí tenía sentido cuidar en el nav de escritorio. El logo grande se oculta para dejarle todo el ancho posible a la fila de pestañas. */ @media (max-width: 768px) { body.liquid-bubbles-preview .main-nav .brand { display: none !important; } body.liquid-bubbles-preview .lgb-mobile-nav { position: relative; display: flex; flex: 1 1 auto; min-width: 0; } body.liquid-bubbles-preview .lgb-mobile-row { display: flex; align-items: center; gap: 8px; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 2px; } /* La lupa trae de base "flex:1 1 0" (pensado para repartirse el espacio sobrante de .nav-actions) — dentro de esta fila, que desborda a propósito (scroll lateral), no hay "espacio sobrante" que repartir y ese flex-basis:0 termina resolviendo en 0px pese al min-width. Un flex-basis FIJO (0 0 40px, sin grow/shrink) evita ese cálculo. */ body.liquid-bubbles-preview .lgb-mobile-row #inline-search-wrapper { width: 40px !important; min-width: 40px !important; max-width: 40px !important; flex: 0 0 40px !important; margin: 0 !important; } body.liquid-bubbles-preview .lgb-mobile-row #inline-search-pill { width: 40px !important; min-width: 40px !important; height: 40px !important; } body.liquid-bubbles-preview .lgb-mobile-row #btn-system-updates { flex: 0 0 auto !important; width: 40px !important; min-width: 40px !important; height: 40px !important; margin: 0 !important; border-radius: 999px !important; } body.liquid-bubbles-preview .lgb-mobile-row::-webkit-scrollbar { display: none; } body.liquid-bubbles-preview .lgb-mobile-pill { flex: 0 0 auto; display: flex; align-items: center; gap: 5px; white-space: nowrap; padding: 7px 11px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .65); background: linear-gradient(135deg, rgba(255, 255, 255, .88), rgba(255, 255, 255, .55)); color: #22315e; font-family: inherit; font-weight: 700; font-size: 12px; box-shadow: inset 0 1px 1px rgba(255, 255, 255, .9), 0 6px 16px rgba(60, 80, 160, .14); /* Da el "resorte" líquido al tocar, sin filtro SVG (caro) — el bounce cubic-bezier hace que se sienta elástico, no solo un click plano. */ transition: transform .32s cubic-bezier(.34, 1.56, .64, 1), background .2s ease; } body.liquid-bubbles-preview .lgb-mobile-pill:active { transform: scale(.9); } body.liquid-bubbles-preview .lgb-mobile-pill.active { background: linear-gradient(135deg, #5b8cff, #2b5fe3 70%); color: #fff; border-color: rgba(255, 255, 255, .75); } body.liquid-bubbles-preview .lgb-mobile-pill.open { animation: lgbMobilePillPop .38s cubic-bezier(.34, 1.56, .64, 1); } body.liquid-bubbles-preview .lgb-mobile-pill .material-symbols-outlined { font-size: 16px; } body.liquid-bubbles-preview .lgb-mobile-pill .lgb-mobile-chev { font-size: 14px; opacity: .7; transition: transform .25s; } body.liquid-bubbles-preview .lgb-mobile-pill.open .lgb-mobile-chev { transform: rotate(180deg); } @keyframes lgbMobilePillPop { 0% { transform: scale(1); } 40% { transform: scale(1.12, .88); } 70% { transform: scale(.96, 1.05); } 100% { transform: scale(1); } } body.liquid-bubbles-preview .lgb-mobile-subrow { /* position:fixed a todo el ancho de la pantalla (no solo el espacio que le tocó a .lgb-mobile-nav en su fila, que es angosto porque comparte lugar con hamburguesa/marca) — es un panel flotante, no hace falta que respete ese ancho acotado. "top" lo pone el JS (openSub), calculado contra la posición real del nav para que quede pegado justo debajo. */ position: fixed; left: 10px; right: 10px; display: flex; gap: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 9px; border-radius: 20px; background: linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(255, 255, 255, .86)); border: 1px solid rgba(255, 255, 255, .75); box-shadow: 0 18px 40px rgba(30, 60, 140, .26); z-index: 5010; opacity: 0; /* scaleY además de translateY: "chorrea" desde la pestaña en vez de solo deslizar — el efecto líquido que pedías, sin SVG. */ transform: translateY(-10px) scaleY(.6); transform-origin: top center; pointer-events: none; transition: opacity .28s cubic-bezier(.34, 1.4, .64, 1), transform .32s cubic-bezier(.34, 1.4, .64, 1); } body.liquid-bubbles-preview .lgb-mobile-subrow.on { opacity: 1; transform: translateY(0) scaleY(1); pointer-events: auto; } body.liquid-bubbles-preview .lgb-mobile-subrow::-webkit-scrollbar { display: none; } body.liquid-bubbles-preview .lgb-mobile-sub-pill { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 4px; white-space: nowrap; padding: 8px 12px; border-radius: 16px; border: 0; transition: transform .2s cubic-bezier(.34, 1.56, .64, 1); background: rgba(91, 140, 255, .12); color: #22315e; font-family: inherit; font-weight: 600; font-size: 12px; } body.liquid-bubbles-preview .lgb-mobile-sub-pill .material-symbols-outlined { font-size: 18px; } body.liquid-bubbles-preview .lgb-mobile-sub-pill:active { transform: scale(.9); } }