/* Boceto "Liquid Glass" — capa de PREVIEW, no destructiva. Solo se activa con (ver js/liquid-glass-preview.js, que a su vez solo se inyecta con ?boceto=glass en la URL). Sin esa clase, este archivo no cambia nada. Seguro de dejar enlazado en index.html. V3: fondo blanco limpio (no esferas de color) + vidrio esmerilado sobre él, texto oscuro para legibilidad total. Mismo lenguaje de "vidrio líquido" (brillo especular, destello, barrido de luz) pero calibrado para blanco. */ /* ---------- Modo liviano (equipos de bajos recursos) ---------- js/liquid-glass-preview.js detecta pocos núcleos/poca RAM (o "reducir movimiento" del sistema operativo) y agrega esta clase junto con la principal. El backdrop-filter (blur) es lo más caro de todo el efecto — cada tarjeta con blur es una pasada extra de composición en la GPU, y con varias en pantalla a la vez (tarjetas de día, KPIs...) un equipo con gráficos integrados se nota lento o hasta traba la pestaña. Acá lo apagamos TODO de una sola vez con un selector universal — el degradado y los bordes ya dan la sensación de vidrio sin ese costo, y las animaciones (destellos, ripple, efectos de brillo) también se apagan porque cada repintado tiene su propio costo. */ /* Especificidad reforzada (4 clases repetidas) a propósito: todas las reglas individuales de cada elemento pesan "body.liquid-glass-preview. liquid-glass-preview .elemento" (3 selectores de clase) — con solo 2 clases + "*" acá perdíamos ese empate de especificidad y el blur seguía activo pese a que la clase "lite" sí se aplicaba. Con 4 le ganamos a cualquiera de esas reglas sin depender del orden en el archivo. */ body.liquid-glass-lite.liquid-glass-lite.liquid-glass-lite.liquid-glass-lite, body.liquid-glass-lite.liquid-glass-lite.liquid-glass-lite.liquid-glass-lite * { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; animation: none !important; } body.liquid-glass-preview.liquid-glass-preview { /* Señal para js/liquid-glass-preview.js: mientras este custom property no valga "1" en el computed style del body, esta hoja de estilo todavía no está activa (pudo no haber terminado de cargar/insertarse todavía). El JS espera a verlo antes de construir el nav "burbujas" (V3) — si lo construye antes, queda sin estilo y el nav clásico (todavía no oculto por la regla de abajo) se ve duplicado encima. */ --lg-css-ready: 1; --glass-stroke-hi: rgba(255, 255, 255, .95); /* Antes era un borde azul-gris con contraste definido (se veía como línea). Ahora es blanco translúcido y más tenue — se lee como resplandor del borde del vidrio, no como un contorno dibujado. */ --glass-stroke-lo: rgba(255, 255, 255, .3); /* Bajamos la opacidad del relleno para que se vea de verdad a través del vidrio (antes casi tapaba todo con blanco sólido). */ --glass-fill: rgba(255, 255, 255, .38); --glass-fill-strong: rgba(255, 255, 255, .52); --glass-brand: #4f6fe0; --glass-violet: #8b5cf6; --glass-coral: #ff9a5c; --text-onglass: #1a2340; --text-onglass-dim: #5b6478; --text-onglass-active: #fff; --shadow-onglass: none; /* Sombra más difusa y de menor opacidad — "eleva" sin verse pesada, manteniendo la sensación de que la tarjeta flota. */ --card-shadow: 0 26px 50px -22px rgba(30, 40, 90, .16), 0 6px 16px -6px rgba(30, 40, 90, .07); } /* ---------- Fondo: blanco limpio con una pizca de profundidad ---------- */ body.liquid-glass-preview.liquid-glass-preview::before { content: "" !important; position: fixed !important; inset: 0 !important; z-index: 0 !important; pointer-events: none !important; /* Más presencia de color que antes (el blanco casi puro no le daba nada al vidrio para "revelar" — por más blur que tuviera, se veía plano). */ background: radial-gradient(42% 34% at 12% 8%, rgba(79, 111, 224, .22), transparent 72%), radial-gradient(38% 32% at 92% 14%, rgba(139, 92, 246, .2), transparent 72%), radial-gradient(40% 34% at 85% 92%, rgba(255, 154, 92, .18), transparent 72%), radial-gradient(34% 30% at 8% 90%, rgba(79, 111, 224, .16), transparent 72%), radial-gradient(50% 40% at 50% 45%, rgba(139, 92, 246, .07), transparent 75%), #fbfbfe !important; } /* grano finísimo para que el blanco no se vea "plástico" */ body.liquid-glass-preview.liquid-glass-preview::after { content: "" !important; position: fixed !important; inset: 0 !important; z-index: 0 !important; pointer-events: none !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") !important; opacity: .025; } body.liquid-glass-preview.liquid-glass-preview, body.liquid-glass-preview.liquid-glass-preview #app-screen, body.liquid-glass-preview.liquid-glass-preview .app-container, body.liquid-glass-preview.liquid-glass-preview .tab-view, body.liquid-glass-preview.liquid-glass-preview .dxp { background: transparent !important; } /* La app flota con margen sobre el fondo, como en la referencia */ body.liquid-glass-preview.liquid-glass-preview #app-screen { padding: 8px 26px 26px !important; box-sizing: border-box; } /* En pantallas angostas (celular) ese margen de 26px por lado es demasiado: se come ~15% del ancho solo en bordes y deja el contenido real (KPIs, tarjetas) apretado en el centro. Lo reducimos y bajamos también los radios grandes (32px/26px), pensados para paneles anchos de escritorio, para que el "vidrio" siga notándose sin robarle espacio útil a una pantalla chica. */ @media (max-width: 640px) { body.liquid-glass-preview.liquid-glass-preview #app-screen { padding: 6px 8px 14px !important; } body.liquid-glass-preview.liquid-glass-preview .dxp { border-radius: 18px !important; } body.liquid-glass-preview.liquid-glass-preview .card, body.liquid-glass-preview.liquid-glass-preview .card-soft, body.liquid-glass-preview.liquid-glass-preview .stat-card, body.liquid-glass-preview.liquid-glass-preview .dxp-kpi { border-radius: 14px !important; } body.liquid-glass-preview.liquid-glass-preview .main-nav { margin: 0 0 8px !important; } /* En móvil el nav original es position:fixed y .app-container reserva 70px de margin-top para no quedar tapado por él. Acá el nav pasa a position:relative (regla de más arriba, para que el destello del vidrio se recorte bien) y vuelve al flujo normal — ya empuja el contenido por su cuenta, así que ese margen de compensación sobra y se ve como un hueco vacío enorme entre el nav y la primera tarjeta. */ body.liquid-glass-preview.liquid-glass-preview .app-container { margin-top: 0 !important; padding-top: 0 !important; } body.liquid-glass-preview.liquid-glass-preview .dxp { padding-top: 6px !important; } /* Bug real (no del vidrio): en móvil, dashboard-module.js trae la regla genérica ".dxp-qcard > div{overflow:hidden;flex:1}" pensada para el texto de las tarjetas normales de "Acciones rápidas". La tarjeta de Multisede reutiliza la clase .dxp-qcard pero por dentro tiene DOS divs (identidad + botones) que con flex:1 quedan forzados a partirse la altura 50/50 sin importar cuánto contenido tengan — así, cuando los 3 botones (Cambiar/Resumen/Traslados) no caben en una fila, la fila de botones se recorta a la mitad y "Traslados" desaparece. Le devolvemos el alto natural y quitamos el recorte solo para esta tarjeta. */ body.liquid-glass-preview.liquid-glass-preview .dxp-multisede-special-card > div { overflow: visible !important; flex: 0 0 auto !important; } } body.liquid-glass-preview.liquid-glass-preview #app-screen, body.liquid-glass-preview.liquid-glass-preview .main-nav, body.liquid-glass-preview.liquid-glass-preview .dxp, body.liquid-glass-preview.liquid-glass-preview .card, body.liquid-glass-preview.liquid-glass-preview .card-soft, body.liquid-glass-preview.liquid-glass-preview .stat-card, body.liquid-glass-preview.liquid-glass-preview .modal-content, body.liquid-glass-preview.liquid-glass-preview .dxp-kpi, body.liquid-glass-preview.liquid-glass-preview .dxp-panel, body.liquid-glass-preview.liquid-glass-preview .dxp-opp { position: relative; z-index: 1; } /* ---------- Efecto vidrio líquido: destello periódico (sin seguir el mouse) ---------- */ /* El brillo blanco que seguía el cursor (radial-gradient en var(--mx)/var(--my)) se quitó: quedaba como una mancha suelta en paneles grandes/vacíos. Queda solo el barrido periódico del nav, que es una animación fija, no interactiva. */ body.liquid-glass-preview.liquid-glass-preview .main-nav { isolation: isolate; } /* barrido periódico de luz sobre el nav, como un reflejo que cruza el cristal */ body.liquid-glass-preview.liquid-glass-preview .main-nav::after { content: "" !important; display: block !important; position: absolute !important; inset: 0 !important; border-radius: inherit !important; pointer-events: none !important; z-index: 7 !important; background: linear-gradient(100deg, transparent 40%, rgba(255, 255, 255, .85) 50%, transparent 60%) !important; background-size: 260% 100% !important; animation: dioLGShimmer 8s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { body.liquid-glass-preview.liquid-glass-preview .main-nav::after { animation: none !important; } } @keyframes dioLGShimmer { 0%, 15% { background-position: 140% 0; } 55%, 100% { background-position: -40% 0; } } /* ---------- Efecto de toque: el vidrio "reacciona" al clic (inyectado por JS) ---------- */ body.liquid-glass-preview.liquid-glass-preview .lg-ripple-host { position: relative !important; overflow: hidden !important; } /* La tarjeta de Multisede (y cualquier tarjeta de acciones que envuelva botones en varias filas en móvil) NECESITA poder crecer y mostrar todo su contenido — el "overflow:hidden" de arriba, pensado para contener el destello circular dentro de botones normales, le recortaba el botón "Traslados" cuando bajaba a una segunda fila. Ganamos con más especificidad para que este caso puntual quede siempre visible. */ body.liquid-glass-preview.liquid-glass-preview .dxp-multisede-special-card.lg-ripple-host { overflow: visible !important; } .lg-ripple { position: absolute !important; border-radius: 50% !important; background: radial-gradient(circle, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, .35) 45%, transparent 72%) !important; transform: translate(-50%, -50%) scale(0) !important; pointer-events: none !important; z-index: 20 !important; animation: dioLGRipple .55s cubic-bezier(.22, 1, .36, 1) forwards; } @keyframes dioLGRipple { 0% { transform: translate(-50%, -50%) scale(0); opacity: .9; } 100% { transform: translate(-50%, -50%) scale(1); opacity: 0; } } /* Ligero "hundimiento" del cristal al presionar, como un botón físico */ body.liquid-glass-preview.liquid-glass-preview button:active, body.liquid-glass-preview.liquid-glass-preview .nav-item:active, body.liquid-glass-preview.liquid-glass-preview .dxp-qcard:active, body.liquid-glass-preview.liquid-glass-preview .dxp-kpi:active { transform: scale(.97) !important; transition: transform .12s ease !important; } @media (prefers-reduced-motion: reduce) { .lg-ripple { display: none !important; } } /* ---------- Nav: píldora flotante, azul profundo tipo vidrio (sin violeta) ---------- */ body.liquid-glass-preview.liquid-glass-preview .main-nav { margin: 0 0 18px !important; border-radius: 999px !important; background: radial-gradient(120% 200% at 15% -30%, rgba(255, 255, 255, .5), transparent 55%), linear-gradient(120deg, #3a7bf0 0%, #1e5fe0 45%, #143fc2 100%) !important; -webkit-backdrop-filter: blur(14px) saturate(130%) !important; backdrop-filter: blur(14px) saturate(130%) !important; border: 1px solid rgba(255, 255, 255, .35) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -10px 20px -14px rgba(10, 30, 100, .5), 0 16px 38px -16px rgba(20, 60, 200, .5) !important; overflow: visible !important; } body.liquid-glass-preview.liquid-glass-preview .main-nav .nav-items { align-items: center !important; } body.liquid-glass-preview.liquid-glass-preview .main-nav .nav-item, body.liquid-glass-preview.liquid-glass-preview .main-nav .nav-section-toggle { align-self: center !important; flex: 0 0 auto !important; height: 66px !important; min-height: 66px !important; max-height: 66px !important; box-sizing: border-box !important; } body.liquid-glass-preview.liquid-glass-preview .brand-name, body.liquid-glass-preview.liquid-glass-preview .nav-item, body.liquid-glass-preview.liquid-glass-preview .nav-item span, body.liquid-glass-preview.liquid-glass-preview .nav-section-toggle, body.liquid-glass-preview.liquid-glass-preview .nav-section-toggle span { color: rgba(255, 255, 255, .95) !important; text-shadow: 0 1px 3px rgba(10, 30, 90, .4) !important; } /* Cada pestaña (incluso inactiva) se ve como su propia burbuja de vidrio, no como texto plano sobre el fondo azul. */ /* Brillo fijo tipo "burbuja" arriba de cada botón (como un domo de vidrio que refleja luz ambiente) — estático, no sigue el mouse, así no repetimos el problema de la mancha suelta. */ body.liquid-glass-preview.liquid-glass-preview .nav-item { background: radial-gradient(120% 100% at 50% -30%, rgba(255, 255, 255, .55), transparent 60%), rgba(255, 255, 255, .08) !important; border: 1px solid rgba(255, 255, 255, .14) !important; border-radius: 999px !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35) !important; } body.liquid-glass-preview.liquid-glass-preview .nav-item:hover { background: rgba(255, 255, 255, .08) !important; border-radius: 999px !important; } /* La pestaña activa es un cuadrado/píldora de azul más sólido y brillante, como en la referencia — no morado. */ body.liquid-glass-preview.liquid-glass-preview .nav-item.active { background: rgba(255, 255, 255, .1) !important; border: 1px solid rgba(255, 255, 255, .2) !important; border-radius: 999px !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .34) !important; } body.liquid-glass-preview.liquid-glass-preview .nav-item.active span, body.liquid-glass-preview.liquid-glass-preview .nav-item.active .material-symbols-outlined { color: #fff !important; text-shadow: 0 1px 2px rgba(10, 30, 90, .4) !important; font-weight: 700; } /* Hover "Liquid Glass" tipo selector Apple: una lente translúcida aparece sobre la pestaña sin empujar ni escalar el layout. */ body.liquid-glass-preview.liquid-glass-preview .main-nav .nav-item { isolation: isolate !important; overflow: visible !important; transform: translateZ(0) !important; transform-origin: center center !important; transition: color .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease !important; } body.liquid-glass-preview.liquid-glass-preview .main-nav .nav-item::before { display: none !important; } body.liquid-glass-preview.liquid-glass-preview .main-nav .lg-nav-hover-lens { position: absolute !important; left: 0 !important; top: 0 !important; width: var(--lg-nav-lens-w, 72px) !important; height: var(--lg-nav-lens-h, 46px) !important; z-index: 24 !important; pointer-events: none !important; opacity: 0 !important; transform: translate3d(var(--lg-nav-lens-x, 0px), var(--lg-nav-lens-y, 0px), 0) scale(.86) !important; border-radius: 28px !important; background: radial-gradient(115% 82% at 20% 0%, rgba(255, 255, 255, .98), rgba(255, 255, 255, .54) 38%, rgba(255, 255, 255, .18) 69%), radial-gradient(90% 72% at 92% 18%, rgba(206, 224, 255, .52), transparent 62%), linear-gradient(145deg, rgba(255, 255, 255, .58), rgba(255, 255, 255, .2) 56%, rgba(255, 255, 255, .5)) !important; border: 1px solid rgba(255, 255, 255, .74) !important; -webkit-backdrop-filter: blur(12px) saturate(125%) !important; backdrop-filter: blur(12px) saturate(125%) !important; box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .98), inset 12px 0 24px -20px rgba(255, 255, 255, .9), inset -14px -10px 32px -24px rgba(79, 111, 224, .42), 0 14px 34px -20px rgba(20, 45, 120, .34) !important; transition: transform .28s cubic-bezier(.18, .92, .22, 1), width .28s cubic-bezier(.18, .92, .22, 1), height .28s cubic-bezier(.18, .92, .22, 1), opacity .14s ease !important; will-change: transform, width, height, opacity !important; } body.liquid-glass-preview.liquid-glass-preview .main-nav .lg-nav-hover-lens::before { content: "" !important; position: absolute !important; inset: 5px 8px auto 8px !important; height: 42% !important; border-radius: inherit !important; background: linear-gradient(180deg, rgba(255, 255, 255, .78), transparent) !important; opacity: .8 !important; pointer-events: none !important; } body.liquid-glass-preview.liquid-glass-preview .main-nav .lg-nav-hover-lens::after { content: "" !important; position: absolute !important; inset: 10px 8px !important; border-radius: inherit !important; background: linear-gradient(90deg, rgba(8, 16, 32, .22), transparent 10%, transparent 90%, rgba(8, 16, 32, .24)), radial-gradient(60% 90% at 0% 50%, rgba(255, 255, 255, .66), transparent 42%), radial-gradient(60% 90% at 100% 50%, rgba(255, 255, 255, .58), transparent 42%) !important; opacity: .62 !important; filter: blur(.2px) !important; pointer-events: none !important; } body.liquid-glass-preview.liquid-glass-preview .main-nav .lg-nav-lens-content { position: absolute !important; inset: 0 !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 3px !important; color: #071632 !important; opacity: .92 !important; transform: translate3d(0, -1px, 0) scale(1.12) !important; transform-origin: center center !important; pointer-events: none !important; z-index: 2 !important; } body.liquid-glass-preview.liquid-glass-preview .main-nav .lg-nav-hover-lens.lg-nav-lens-active .lg-nav-lens-content { color: #fff !important; text-shadow: 0 1px 2px rgba(8, 26, 76, .48) !important; } body.liquid-glass-preview.liquid-glass-preview .main-nav .lg-nav-lens-icon { font-family: "Material Symbols Outlined" !important; font-size: 1.18rem !important; line-height: 1 !important; font-weight: normal !important; letter-spacing: normal !important; text-transform: none !important; } body.liquid-glass-preview.liquid-glass-preview .main-nav .lg-nav-lens-text { max-width: calc(100% - 14px) !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", system-ui, sans-serif !important; font-size: .69rem !important; line-height: 1 !important; font-weight: 800 !important; letter-spacing: 0 !important; } body.liquid-glass-preview.liquid-glass-preview .main-nav.lg-nav-hovering .lg-nav-hover-lens { opacity: .96 !important; transform: translate3d(var(--lg-nav-lens-x, 0px), var(--lg-nav-lens-y, 0px), 0) scale(1) !important; } body.liquid-glass-preview.liquid-glass-preview .main-nav .nav-item::after { z-index: 11 !important; } body.liquid-glass-preview.liquid-glass-preview .main-nav .nav-item, body.liquid-glass-preview.liquid-glass-preview .main-nav .nav-section-toggle { position: relative !important; z-index: 10 !important; } body.liquid-glass-preview.liquid-glass-preview .main-nav .nav-item > span, body.liquid-glass-preview.liquid-glass-preview .main-nav .nav-section-toggle > span, body.liquid-glass-preview.liquid-glass-preview .main-nav .nav-item #nav-cart-badge { position: relative !important; z-index: 2 !important; } body.liquid-glass-preview.liquid-glass-preview .main-nav .nav-item:hover { background: rgba(255, 255, 255, .08) !important; border-color: rgba(255, 255, 255, .34) !important; transform: translateZ(0) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35) !important; } body.liquid-glass-preview.liquid-glass-preview .main-nav .nav-item:active, body.liquid-glass-preview.liquid-glass-preview .main-nav .nav-item.active, body.liquid-glass-preview.liquid-glass-preview .main-nav .nav-item.active:active, body.liquid-glass-preview.liquid-glass-preview .main-nav .nav-section-toggle:active { transform: translateZ(0) !important; scale: 1 !important; } body.liquid-glass-preview.liquid-glass-preview .main-nav .nav-section-collapsible:not(.collapsed) .nav-section-items .nav-item:not(.active):hover, body.liquid-glass-preview.liquid-glass-preview.nav-style-floating .main-nav .nav-section-items .nav-item:hover, body.liquid-glass-preview.liquid-glass-preview.nav-style-dock .main-nav .nav-section-items .nav-item:hover, body.liquid-glass-preview.liquid-glass-preview.nav-style-megamenu .main-nav .nav-section-items .nav-item:hover, body.liquid-glass-preview.liquid-glass-preview .main-nav .nav-section-toggle:hover { transform: translateZ(0) !important; scale: 1 !important; } body.liquid-glass-preview.liquid-glass-preview .main-nav .nav-item .material-symbols-outlined, body.liquid-glass-preview.liquid-glass-preview .main-nav .nav-section-toggle .material-symbols-outlined, body.liquid-glass-preview.liquid-glass-preview .main-nav .nav-item:hover .material-symbols-outlined, body.liquid-glass-preview.liquid-glass-preview .main-nav .nav-item.active .material-symbols-outlined { transform: none !important; animation: none !important; } body.liquid-glass-preview.liquid-glass-preview .main-nav .nav-item:hover::before { display: none !important; } body.liquid-glass-preview.liquid-glass-preview .main-nav .nav-item:hover span, body.liquid-glass-preview.liquid-glass-preview .main-nav .nav-item:hover .material-symbols-outlined, body.liquid-glass-preview.liquid-glass-preview .main-nav .nav-section-toggle:hover span, body.liquid-glass-preview.liquid-glass-preview .main-nav .nav-section-toggle:hover .material-symbols-outlined { color: #10204a !important; text-shadow: 0 1px 0 rgba(255, 255, 255, .62) !important; } body.liquid-glass-preview.liquid-glass-preview .main-nav .nav-item.active::before { display: none !important; } body.liquid-glass-preview.liquid-glass-preview .main-nav .nav-item.active:hover::before { display: none !important; } body.liquid-glass-preview.liquid-glass-preview .main-nav .nav-item.active:hover span, body.liquid-glass-preview.liquid-glass-preview .main-nav .nav-item.active:hover .material-symbols-outlined { color: #fff !important; text-shadow: 0 1px 2px rgba(10, 30, 90, .42) !important; } /* Dirección visual final: navbar claro tipo vidrio, como la referencia. */ body.liquid-glass-preview.liquid-glass-preview .main-nav { min-height: 98px !important; padding: 10px 20px !important; border-radius: 38px !important; overflow: visible !important; background: radial-gradient(88% 130% at 16% 0%, rgba(255, 255, 255, .9), rgba(210, 229, 255, .42) 44%, transparent 74%), radial-gradient(86% 140% at 90% 8%, rgba(59, 130, 246, .42), rgba(139, 184, 255, .22) 42%, transparent 72%), linear-gradient(120deg, rgba(255, 255, 255, .58), rgba(205, 226, 255, .48) 45%, rgba(113, 171, 255, .38)) !important; -webkit-backdrop-filter: blur(16px) saturate(125%) !important; backdrop-filter: blur(16px) saturate(125%) !important; border: 1px solid rgba(255, 255, 255, .72) !important; box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .95), inset 0 -18px 34px -34px rgba(37, 99, 235, .44), 0 24px 56px -30px rgba(37, 99, 235, .42) !important; } body.liquid-glass-preview.liquid-glass-preview .main-nav .nav-content { align-items: center !important; gap: 14px !important; } body.liquid-glass-preview.liquid-glass-preview .main-nav .brand-inner { background: white !important; } body.liquid-glass-preview.liquid-glass-preview .main-nav .brand-powered, body.liquid-glass-preview.liquid-glass-preview .main-nav .brand-name { text-shadow: none !important; } body.liquid-glass-preview.liquid-glass-preview .main-nav .nav-items { gap: 0 !important; align-items: center !important; padding: 6px !important; border-radius: 24px !important; background: radial-gradient(120% 90% at 12% 0%, rgba(255, 255, 255, .74), rgba(255, 255, 255, .26) 52%, transparent 80%), rgba(255, 255, 255, .22) !important; border: 1px solid rgba(255, 255, 255, .46) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72), inset 0 -12px 22px -22px rgba(37, 99, 235, .32), 0 16px 34px -28px rgba(37, 99, 235, .34) !important; } body.liquid-glass-preview.liquid-glass-preview .main-nav .nav-section { position: relative !important; flex: 0 0 auto !important; overflow: visible !important; } body.liquid-glass-preview.liquid-glass-preview .main-nav .nav-item, body.liquid-glass-preview.liquid-glass-preview .main-nav .nav-section-toggle { width: 82px !important; min-width: 82px !important; max-width: 92px !important; height: 64px !important; min-height: 64px !important; max-height: 64px !important; padding: 7px 8px !important; border-radius: 18px !important; gap: 4px !important; background: radial-gradient(120% 95% at 50% -28%, rgba(255, 255, 255, .5), transparent 62%), rgba(255, 255, 255, .12) !important; border: 1px solid rgba(255, 255, 255, .22) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .44), inset -1px 0 0 rgba(255, 255, 255, .18) !important; } body.liquid-glass-preview.liquid-glass-preview .main-nav .nav-item > span:not(.material-symbols-outlined):not(#nav-cart-badge), body.liquid-glass-preview.liquid-glass-preview .main-nav .nav-section-toggle > span:not(.material-symbols-outlined) { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", system-ui, sans-serif !important; font-size: .61rem !important; line-height: 1.05 !important; max-width: 100% !important; color: #102b62 !important; letter-spacing: 0 !important; text-shadow: 0 1px 0 rgba(255, 255, 255, .62) !important; transform: translate3d(0, 0, 0) scale(1) !important; transform-origin: center center !important; transition: transform .24s cubic-bezier(.18, .92, .22, 1), color .18s ease, text-shadow .18s ease, font-weight .18s ease !important; will-change: transform !important; } body.liquid-glass-preview.liquid-glass-preview .main-nav .nav-item > .material-symbols-outlined, body.liquid-glass-preview.liquid-glass-preview .main-nav .nav-section-toggle > .material-symbols-outlined { font-family: "Material Symbols Outlined" !important; font-size: 1.08rem !important; line-height: 1 !important; font-weight: normal !important; letter-spacing: normal !important; text-transform: none !important; color: #102b62 !important; text-shadow: 0 1px 0 rgba(255, 255, 255, .62) !important; transform: translate3d(0, 0, 0) scale(1) !important; transform-origin: center center !important; transition: transform .24s cubic-bezier(.18, .92, .22, 1), color .18s ease, text-shadow .18s ease !important; will-change: transform !important; } body.liquid-glass-preview.liquid-glass-preview .main-nav .nav-section-toggle > .nav-section-arrow.material-symbols-outlined { font-size: .78rem !important; } body.liquid-glass-preview.liquid-glass-preview .main-nav .nav-item:hover, body.liquid-glass-preview.liquid-glass-preview .main-nav .nav-section-toggle:hover { background: rgba(255, 255, 255, .18) !important; border-radius: 18px !important; } body.liquid-glass-preview.liquid-glass-preview .main-nav .nav-item.active, body.liquid-glass-preview.liquid-glass-preview .main-nav .nav-section-collapsible.has-active > .nav-section-toggle { background: radial-gradient(118% 92% at 24% 0%, rgba(255, 255, 255, .6), transparent 58%), linear-gradient(180deg, rgba(92, 157, 255, .96), rgba(42, 99, 238, .96)) !important; border: 1px solid rgba(255, 255, 255, .48) !important; border-radius: 18px !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72), inset 0 -14px 24px -24px rgba(10, 30, 90, .72), 0 14px 26px -18px rgba(37, 99, 235, .72) !important; } body.liquid-glass-preview.liquid-glass-preview .main-nav .nav-item.active span, body.liquid-glass-preview.liquid-glass-preview .main-nav .nav-item.active .material-symbols-outlined, body.liquid-glass-preview.liquid-glass-preview .main-nav .nav-section-collapsible.has-active > .nav-section-toggle span, body.liquid-glass-preview.liquid-glass-preview .main-nav .nav-section-collapsible.has-active > .nav-section-toggle .material-symbols-outlined { color: #fff !important; text-shadow: 0 1px 2px rgba(10, 30, 90, .42) !important; } body.liquid-glass-preview.liquid-glass-preview .main-nav .nav-item.active::after { bottom: 7px !important; width: 5px !important; height: 5px !important; background: rgba(255, 255, 255, .9) !important; } body.liquid-glass-preview.liquid-glass-preview .main-nav .nav-item.lg-nav-lens-target > span:not(.material-symbols-outlined):not(#nav-cart-badge), body.liquid-glass-preview.liquid-glass-preview .main-nav .nav-section-toggle.lg-nav-lens-target > span:not(.material-symbols-outlined) { color: #071632 !important; opacity: .08 !important; font-weight: 760 !important; text-shadow: 0 1px 0 rgba(255, 255, 255, .86) !important; transform: translate3d(0, -1px, 0) scale(1.01) !important; } body.liquid-glass-preview.liquid-glass-preview .main-nav .nav-item.lg-nav-lens-target > .material-symbols-outlined, body.liquid-glass-preview.liquid-glass-preview .main-nav .nav-section-toggle.lg-nav-lens-target > .material-symbols-outlined { opacity: .08 !important; transform: translate3d(0, -1px, 0) scale(1.01) !important; } body.liquid-glass-preview.liquid-glass-preview .main-nav .nav-section-toggle.lg-nav-lens-target > .nav-section-arrow.material-symbols-outlined { transform: translate3d(0, 0, 0) scale(1) !important; } body.liquid-glass-preview.liquid-glass-preview .main-nav .nav-item.active.lg-nav-lens-target > span:not(.material-symbols-outlined):not(#nav-cart-badge), body.liquid-glass-preview.liquid-glass-preview .main-nav .nav-section-collapsible.has-active > .nav-section-toggle.lg-nav-lens-target > span:not(.material-symbols-outlined) { color: #fff !important; text-shadow: 0 1px 2px rgba(8, 26, 76, .48) !important; } body.liquid-glass-preview.liquid-glass-preview .main-nav .nav-item.lg-nav-pressing > span:not(.material-symbols-outlined):not(#nav-cart-badge), body.liquid-glass-preview.liquid-glass-preview .main-nav .nav-section-toggle.lg-nav-pressing > span:not(.material-symbols-outlined) { transform: translate3d(0, -1px, 0) scale(1.02) !important; } body.liquid-glass-preview.liquid-glass-preview .main-nav .nav-section-items { position: static !important; display: flex !important; flex-direction: row !important; align-items: center !important; gap: 6px !important; width: auto !important; min-width: 0 !important; max-width: 0 !important; height: 64px !important; max-height: 64px !important; padding: 0 !important; border-radius: 18px !important; background: transparent !important; border: 0 !important; box-shadow: none !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; overflow: hidden !important; transform: translate3d(-8px, 0, 0) scale(.98) !important; transform-origin: left center !important; transition: max-width .34s cubic-bezier(.18, .92, .22, 1), padding .34s cubic-bezier(.18, .92, .22, 1), opacity .18s ease, transform .28s cubic-bezier(.18, .92, .22, 1), visibility 0s linear .2s !important; } body.liquid-glass-preview.liquid-glass-preview .main-nav .nav-section-collapsible:not(.collapsed) > .nav-section-items { max-width: min(52vw, 430px) !important; padding: 0 6px 0 4px !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; overflow: visible !important; transform: translate3d(0, 0, 0) scale(1) !important; transition: max-width .34s cubic-bezier(.18, .92, .22, 1), padding .34s cubic-bezier(.18, .92, .22, 1), opacity .16s ease, transform .24s cubic-bezier(.18, .92, .22, 1), visibility 0s !important; } body.liquid-glass-preview.liquid-glass-preview .main-nav .nav-section-collapsible.collapsed.has-active .nav-section-items, body.liquid-glass-preview.liquid-glass-preview .main-nav .nav-section-collapsible.collapsed .nav-section-items { max-width: 0 !important; padding: 0 !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; overflow: hidden !important; } body.liquid-glass-preview.liquid-glass-preview .main-nav .nav-section-collapsible:not(.collapsed) .nav-section-items .nav-item { display: flex !important; } body.liquid-glass-preview.liquid-glass-preview .main-nav .nav-section-items .nav-item { width: 76px !important; min-width: 76px !important; max-width: 76px !important; height: 58px !important; min-height: 58px !important; max-height: 58px !important; flex-direction: column !important; justify-content: center !important; align-items: center !important; gap: 4px !important; padding: 6px 7px !important; border-radius: 14px !important; } body.liquid-glass-preview.liquid-glass-preview .main-nav .nav-section-items .nav-item > span:not(.material-symbols-outlined):not(#nav-cart-badge) { font-size: .56rem !important; line-height: 1.05 !important; text-align: center !important; white-space: normal !important; } body.liquid-glass-preview.liquid-glass-preview .main-nav .nav-section-items .nav-item > .material-symbols-outlined { font-size: 1rem !important; flex: 0 0 auto !important; } body.liquid-glass-preview.liquid-glass-preview .main-nav .nav-items.lg-nav-section-open { gap: 2px !important; } body.liquid-glass-preview.liquid-glass-preview .main-nav .nav-items.lg-nav-section-open > .lg-nav-peer-hidden { width: 0 !important; min-width: 0 !important; max-width: 0 !important; flex: 0 1 0 !important; padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; border-width: 0 !important; opacity: 0 !important; pointer-events: none !important; overflow: hidden !important; transform: translate3d(-6px, 0, 0) scale(.92) !important; transition: width .28s cubic-bezier(.18, .92, .22, 1), min-width .28s cubic-bezier(.18, .92, .22, 1), max-width .28s cubic-bezier(.18, .92, .22, 1), opacity .16s ease, transform .22s cubic-bezier(.18, .92, .22, 1) !important; } body.liquid-glass-preview.liquid-glass-preview .main-nav .nav-section-collapsible.lg-nav-section-expanded { display: flex !important; align-items: center !important; max-width: min(64vw, 528px) !important; overflow: visible !important; background: radial-gradient(120% 90% at 14% 0%, rgba(255, 255, 255, .62), rgba(255, 255, 255, .22) 58%, transparent 86%), rgba(255, 255, 255, .16) !important; border-color: rgba(255, 255, 255, .48) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .62), 0 14px 28px -24px rgba(37, 99, 235, .34) !important; } body.liquid-glass-preview.liquid-glass-preview .main-nav.lg-nav-section-open .nav-actions { min-width: 0 !important; flex: 0 1 auto !important; } body.liquid-glass-preview.liquid-glass-preview .main-nav.lg-nav-section-open .inline-search-pill { width: 54px !important; min-width: 54px !important; max-width: 54px !important; padding-inline: 14px !important; overflow: hidden !important; transition: width .28s cubic-bezier(.18, .92, .22, 1), min-width .28s cubic-bezier(.18, .92, .22, 1), max-width .28s cubic-bezier(.18, .92, .22, 1), padding .28s cubic-bezier(.18, .92, .22, 1) !important; } body.liquid-glass-preview.liquid-glass-preview .main-nav.lg-nav-section-open #inline-search-input, body.liquid-glass-preview.liquid-glass-preview .main-nav.lg-nav-section-open .keyboard-shortcut { opacity: 0 !important; pointer-events: none !important; } /* ---------- Modo "dock" (barra vertical existente de la app) ---------- */ /* Reusa .main-nav pero en forma de columna — el radio de píldora (999px) no le queda a una barra angosta y alta, así que aquí se define aparte con más especificidad para que gane sobre el 999px de arriba. */ body.liquid-glass-preview.liquid-glass-preview.liquid-glass-preview.nav-style-dock .main-nav { border-radius: 28px !important; background: linear-gradient(165deg, rgba(79, 111, 224, .24), rgba(139, 92, 246, .16) 55%, rgba(79, 111, 224, .1)), linear-gradient(165deg, var(--glass-fill), rgba(255, 255, 255, .4)) !important; } body.liquid-glass-preview.liquid-glass-preview.liquid-glass-preview.nav-style-dock .main-nav .nav-item.active { border-radius: 16px !important; } body.liquid-glass-preview.liquid-glass-preview.liquid-glass-preview.nav-style-dock .main-nav::after { background: linear-gradient(190deg, transparent 40%, rgba(255, 255, 255, .85) 50%, transparent 60%) !important; background-size: 100% 260% !important; animation: dioLGShimmerV 8s ease-in-out infinite; } @keyframes dioLGShimmerV { 0%, 15% { background-position: 0 140%; } 55%, 100% { background-position: 0 -40%; } } body.liquid-glass-preview.liquid-glass-preview .inline-search-pill { background: rgba(255, 255, 255, .22) !important; border: 1px solid rgba(255, 255, 255, .3) !important; border-radius: 999px !important; /* El barrido de luz del nav (::after, z-index:7) cubre TODO el nav de borde a borde — sin esto, sus bandas de degradado se ven como "líneas" cruzando el buscador. Lo subimos por encima de esa capa. */ position: relative !important; z-index: 8 !important; } body.liquid-glass-preview.liquid-glass-preview .inline-search-icon, body.liquid-glass-preview.liquid-glass-preview #inline-search-input { color: #fff !important; } /* La regla genérica de "todos los inputs" (más abajo) también le pone borde y fondo redondeado a ESTE input — como vive adentro de la píldora, que ya tiene su propio borde, se veía como una caja dentro de otra caja (las "líneas"). Se lo quitamos para que solo se vea el borde de la píldora. */ body.liquid-glass-preview.liquid-glass-preview #inline-search-input { background: transparent !important; border: none !important; box-shadow: none !important; } body.liquid-glass-preview.liquid-glass-preview #inline-search-input::placeholder { color: rgba(255, 255, 255, .7) !important; } /* ---------- El dashboard vive dentro de UN panel de cristal grande ---------- */ /* Lleva el mismo lavado azul-violeta que el nav, para que todo el conjunto se sienta como un solo material de color, no un nav azul sobre panel gris. */ body.liquid-glass-preview.liquid-glass-preview .dxp { background: linear-gradient(160deg, rgba(79, 111, 224, .1), rgba(139, 92, 246, .06) 60%, transparent), linear-gradient(155deg, var(--glass-fill), rgba(255, 255, 255, .42)) !important; -webkit-backdrop-filter: blur(15px) saturate(115%) !important; backdrop-filter: blur(15px) saturate(115%) !important; border: 1px solid var(--glass-stroke-lo) !important; border-radius: 32px !important; box-shadow: inset 0 1px 0 var(--glass-stroke-hi), inset 2px 0 0 rgba(120, 150, 255, .16), inset -2px -1px 0 rgba(255, 170, 120, .12), var(--card-shadow) !important; } body.liquid-glass-preview.liquid-glass-preview .dxp * { color: var(--text-onglass); } body.liquid-glass-preview.liquid-glass-preview .dxp h2, body.liquid-glass-preview.liquid-glass-preview .dxp h3, body.liquid-glass-preview.liquid-glass-preview .dxp-sec, body.liquid-glass-preview.liquid-glass-preview .greeting-top strong, body.liquid-glass-preview.liquid-glass-preview .greeting-top b { color: var(--text-onglass) !important; text-shadow: none !important; } /* ---------- Tarjetas genéricas (fuera del dashboard) ---------- */ body.liquid-glass-preview.liquid-glass-preview .card, body.liquid-glass-preview.liquid-glass-preview .card-soft, body.liquid-glass-preview.liquid-glass-preview .stat-card { background: linear-gradient(155deg, var(--glass-fill), rgba(255, 255, 255, .42)) !important; -webkit-backdrop-filter: blur(12px) saturate(115%) !important; backdrop-filter: blur(12px) saturate(115%) !important; border: 1px solid var(--glass-stroke-lo) !important; border-radius: 20px !important; box-shadow: inset 0 1px 0 var(--glass-stroke-hi), var(--card-shadow) !important; color: var(--text-onglass) !important; } body.liquid-glass-preview.liquid-glass-preview .card *, body.liquid-glass-preview.liquid-glass-preview .card-soft *, body.liquid-glass-preview.liquid-glass-preview .stat-card * { color: var(--text-onglass); } /* ---------- KPIs del dashboard: tarjetas anidadas más claras ---------- */ /* Sin backdrop-filter: son 4-5 tarjetas visibles al mismo tiempo, blur en cada una suma rápido. Fondo semi-opaco sin blur se ve casi igual. */ body.liquid-glass-preview.liquid-glass-preview .dxp-kpi { background: var(--glass-fill-strong) !important; border: 1px solid var(--glass-stroke-lo) !important; border-radius: 20px !important; box-shadow: inset 0 1px 0 var(--glass-stroke-hi), 0 12px 26px -18px rgba(30, 40, 90, .28) !important; transition: transform .35s cubic-bezier(.22, 1, .36, 1), box-shadow .35s ease !important; } /* Profundidad y flujo: el cristal "responde" al cursor, no es una foto estática */ body.liquid-glass-preview.liquid-glass-preview .dxp-kpi:hover { transform: translateY(-5px) !important; box-shadow: inset 0 1px 0 var(--glass-stroke-hi), 0 22px 40px -20px rgba(30, 40, 90, .38) !important; } body.liquid-glass-preview.liquid-glass-preview .dxp-kpi-label, body.liquid-glass-preview.liquid-glass-preview .dxp-kpi-val, body.liquid-glass-preview.liquid-glass-preview .dxp-kpi-foot, body.liquid-glass-preview.liquid-glass-preview .dxp-kpi-delta { color: var(--text-onglass) !important; text-shadow: none !important; } body.liquid-glass-preview.liquid-glass-preview .dxp-kpi-hover-panel { background: rgba(255, 255, 255, .95) !important; -webkit-backdrop-filter: blur(11px) saturate(112%) !important; backdrop-filter: blur(11px) saturate(112%) !important; color: var(--text-onglass) !important; } body.liquid-glass-preview.liquid-glass-preview .dxp-kpi-hover-panel * { color: var(--text-onglass) !important; text-shadow: none !important; } body.liquid-glass-preview.liquid-glass-preview .dxp-opp { background: var(--glass-fill) !important; border: 1px solid var(--glass-stroke-lo) !important; border-radius: 16px !important; } body.liquid-glass-preview.liquid-glass-preview .dxp-opp h4, body.liquid-glass-preview.liquid-glass-preview .dxp-opp p { color: var(--text-onglass) !important; text-shadow: none !important; } /* ---------- Punto de venta: SIN Liquid Glass (a pedido) ---------- La pantalla de Ventas es la más pesada de toda la app (dos paneles con tabla de productos, carrito, apertura de caja, selector de pago...) y es donde más se sentía el costo del vidrio. Se decidió dejarla con su apariencia normal/clásica aunque el resto de la app tenga Liquid Glass activado — .pos-card-mostrador-premium solo se usa en Ventas (#card-trabajo y #sales-panel-right), así que no hace falta ningún selector especial: simplemente no le ponemos estilo de vidrio. */ /* ---------- Historial: tarjetas de resumen (Recaudo / Facturado / etc.) ---------- */ body.liquid-glass-preview.liquid-glass-preview .reports-card { background: linear-gradient(160deg, rgba(79, 111, 224, .18), rgba(139, 92, 246, .1) 55%, transparent), linear-gradient(155deg, var(--glass-fill-strong), var(--glass-fill-strong)) !important; -webkit-backdrop-filter: blur(10px) saturate(125%) !important; backdrop-filter: blur(10px) saturate(125%) !important; border: 1px solid rgba(79, 111, 224, .26) !important; border-radius: 20px !important; box-shadow: inset 0 1px 0 var(--glass-stroke-hi), 0 12px 26px -18px rgba(30, 40, 90, .24) !important; transition: transform .35s cubic-bezier(.22, 1, .36, 1), box-shadow .35s ease !important; } body.liquid-glass-preview.liquid-glass-preview .reports-card:hover { transform: translateY(-4px) !important; box-shadow: inset 0 1px 0 var(--glass-stroke-hi), 0 18px 34px -18px rgba(30, 40, 90, .32) !important; } body.liquid-glass-preview.liquid-glass-preview .reports-card * { color: var(--text-onglass); } /* Acento de color a la izquierda por tipo de KPI (Recaudo/Facturado/Gastos/ Utilidad/Ticket), como en la referencia — un filo de color, no toda la tarjeta. */ body.liquid-glass-preview.liquid-glass-preview .kpi-card { border-left: 3px solid transparent !important; } body.liquid-glass-preview.liquid-glass-preview .kpi-ventas { border-left-color: #4f6fe0 !important; } body.liquid-glass-preview.liquid-glass-preview .kpi-facturado { border-left-color: #3b82f6 !important; } body.liquid-glass-preview.liquid-glass-preview .kpi-gastos { border-left-color: #ef4444 !important; } /* La regla ".reports-card *" de arriba pone todo el texto en el color oscuro del vidrio, incluido el valor de Gastos — lo devolvemos a rojo. */ body.liquid-glass-preview.liquid-glass-preview .kpi-gastos .kpi-value { color: #ef4444 !important; } body.liquid-glass-preview.liquid-glass-preview .kpi-utilidad { border-left-color: #14b8a6 !important; } body.liquid-glass-preview.liquid-glass-preview .kpi-ticket { border-left-color: #8b5cf6 !important; } /* ---------- Historial: barra de filtros ---------- */ /* SIN backdrop-filter a propósito: el desplegable de "Método de pago" que vive adentro (.pago-option) usa position:fixed para escapar el recorte del contenedor, y backdrop-filter en un ancestro le roba el punto de referencia (el mismo bug de perspective/filter/transform ya documentado en el proyecto para el menú de navegación) — el desplegable terminaba renderizando encima de las tarjetas de día en vez de debajo del botón. El tinte + sombra solos ya dan la sensación de vidrio sin ese riesgo. */ body.liquid-glass-preview.liquid-glass-preview .filter-bar-modern.historial-filterbar { background: var(--glass-fill) !important; border: 1px solid var(--glass-stroke-lo) !important; border-radius: 18px !important; box-shadow: inset 0 1px 0 var(--glass-stroke-hi), var(--card-shadow) !important; } /* La fila nativa hace scroll lateral cuando no cabe (flex-wrap:nowrap + overflow-x:auto) — con el padding/bordes del vidrio deja de caber en desktop. La forzamos a bajar de línea en vez de esconder contenido. */ body.liquid-glass-preview.liquid-glass-preview .historial-filter-row { flex-wrap: wrap !important; overflow-x: visible !important; } /* "Filtrar"/"Limpiar" sobran: buscar con Enter y el botón "×" (agregado por JS) cubren lo mismo con menos clics. Los botones siguen existiendo en el DOM (por si algo más los necesita) solo que ocultos. */ body.liquid-glass-preview.liquid-glass-preview .historial-filterbar .historial-filter-btn, body.liquid-glass-preview.liquid-glass-preview .historial-filterbar .historial-clear-btn { display: none !important; } body.liquid-glass-preview.liquid-glass-preview .lg-search-clear { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; border-radius: 50%; border: 1px solid rgba(120, 150, 255, .4); background: linear-gradient(160deg, #ffffff 0%, #dce6ff 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -4px 6px -4px rgba(120, 150, 255, .4), 0 3px 8px -3px rgba(79, 111, 224, .35); color: #3552c6; display: none; align-items: center; justify-content: center; cursor: pointer; font-size: 16px !important; line-height: 1; transition: transform .15s ease; } body.liquid-glass-preview.liquid-glass-preview .lg-search-clear:hover { transform: translateY(-50%) scale(1.08); } body.liquid-glass-preview.liquid-glass-preview .lg-search-clear:active { transform: translateY(-50%) scale(.92); } body.liquid-glass-preview.liquid-glass-preview .lg-search-clear.lg-visible { display: flex; } body.liquid-glass-preview.liquid-glass-preview #filter-busqueda-historial { background: linear-gradient(160deg, #ffffff 0%, #f2f6ff 55%, #e4ecff 100%) !important; border: 1px solid rgba(120, 150, 255, .35) !important; border-radius: 14px !important; box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .95), inset 0 -6px 10px -8px rgba(120, 150, 255, .35) !important; } body.liquid-glass-preview.liquid-glass-preview .historial-filterbar .historial-mini-btn { background: rgba(120, 140, 220, .1) !important; border: 1px solid var(--glass-stroke-lo) !important; border-radius: 10px !important; color: var(--text-onglass) !important; } body.liquid-glass-preview.liquid-glass-preview .historial-filterbar .btn-shortcut { background: linear-gradient(90deg, var(--glass-brand), var(--glass-violet)) !important; border: none !important; border-radius: 10px !important; color: #fff !important; } /* Cápsulas "etiqueta arriba / valor abajo" (inyectadas por JS sobre los reales de Historial, que quedan invisibles pero funcionales debajo, tapados por .lg-capsule-face). */ body.liquid-glass-preview.liquid-glass-preview .lg-capsule { position: relative; display: flex; /* Antes crecía para caber TODO el texto (ej. "TODOS LOS VENDEDORES") y se desbordaba de su contenedor padre — el flex-wrap de la fila no lo detecta porque el desborde pasa un nivel más adentro. Ahora se ajusta al ancho que el padre le da y recorta el texto largo con "…" en vez de crecer. */ width: 100%; max-width: 100%; /* Suficiente para "Diciembre"/"Septiembre" sin cortar — y como sigue teniendo max-width:100%, en el campo Vendedor (contenedor angosto) el max-width manda igual y no vuelve a desbordarse. */ min-width: 128px; box-sizing: border-box; height: 54px; border-radius: 14px; /* Vidrio "burbuja": degradado claro arriba → azulado abajo + reflejo interno, igual que la píldora del total del día en Historial. */ background: linear-gradient(160deg, #ffffff 0%, #f2f6ff 55%, #e4ecff 100%); border: 1px solid rgba(120, 150, 255, .35); box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .95), inset 0 -6px 10px -8px rgba(120, 150, 255, .35), 0 4px 12px -6px rgba(79, 111, 224, .22); } /* El input/select original traía su propio ícono a la izquierda (.input-icon, position:absolute dentro de .input-modern-wrapper) — ahora queda flotando suelto porque la cápsula tapa el campo pero no es hija de ese ícono. Ya dibujamos nuestro propio ícono a la derecha (.lg-capsule-caret), así que ocultamos el viejo para no tener dos. */ body.liquid-glass-preview.liquid-glass-preview .input-modern-wrapper:has(.lg-capsule) .input-icon { display: none !important; } body.liquid-glass-preview.liquid-glass-preview .lg-capsule select, body.liquid-glass-preview.liquid-glass-preview .lg-capsule input { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; opacity: 0 !important; border: none !important; cursor: pointer !important; z-index: 2 !important; } body.liquid-glass-preview.liquid-glass-preview .lg-capsule-face { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 6px 34px 6px 14px; pointer-events: none; width: 100%; min-width: 0; /* deja que el texto de adentro se pueda recortar */ overflow: hidden; box-sizing: border-box; } body.liquid-glass-preview.liquid-glass-preview .lg-capsule-label { font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-onglass-dim); } body.liquid-glass-preview.liquid-glass-preview .lg-capsule-value { font-size: 14px; font-weight: 800; color: var(--text-onglass); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } body.liquid-glass-preview.liquid-glass-preview .lg-capsule-caret { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-size: 18px !important; color: var(--text-onglass-dim); } /* El selector de método de pago ya trae su propio "label arriba/valor abajo" (icono + TODOS + subtítulo) — solo le damos el mismo acabado de cápsula, sin envolverlo, para que combine con las demás. */ body.liquid-glass-preview.liquid-glass-preview .hist-pago-selector-wrap { /* Medía 40px vs los 54px de las demás cápsulas — por eso se veía "distinto" en la fila, no por el color. Igualamos la altura. */ height: 54px !important; box-sizing: border-box !important; } /* El fondo blanco real vive en el BOTÓN de adentro, no en el wrap (que es transparente por diseño) — la primera vez lo puse en el lugar equivocado. */ body.liquid-glass-preview.liquid-glass-preview .hist-pago-selector-btn { height: 100% !important; box-sizing: border-box !important; display: flex !important; align-items: center !important; border-radius: 14px !important; background: linear-gradient(160deg, #ffffff 0%, #f2f6ff 55%, #e4ecff 100%) !important; border: 1px solid rgba(120, 150, 255, .35) !important; box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .95), inset 0 -6px 10px -8px rgba(120, 150, 255, .35), 0 4px 12px -6px rgba(79, 111, 224, .22) !important; } /* #pago-selector-btn (selector de método de pago de Punto de Venta) YA NO lleva vidrio — a pedido, toda la pantalla de Ventas quedó sin efecto Liquid Glass (ver más abajo "Ventas: sin Liquid Glass"). Solo se mantiene para Historial (#hist-pago-selector-btn / .hist-pago-selector-btn). */ body.liquid-glass-preview.liquid-glass-preview #hist-pago-selector-btn, body.liquid-glass-preview.liquid-glass-preview .hist-pago-selector-btn, body.liquid-glass-preview.liquid-glass-preview .lg-capsule, body.liquid-glass-preview.liquid-glass-preview .pago-option { isolation: isolate !important; overflow: hidden !important; transition: transform .14s cubic-bezier(.2, .9, .22, 1), box-shadow .14s ease, border-color .14s ease !important; } body.liquid-glass-preview.liquid-glass-preview #hist-pago-selector-btn:hover, body.liquid-glass-preview.liquid-glass-preview .hist-pago-selector-btn:hover, body.liquid-glass-preview.liquid-glass-preview .lg-capsule:hover, body.liquid-glass-preview.liquid-glass-preview .pago-option:hover { transform: translateY(-1px) !important; border-color: rgba(120, 150, 255, .55) !important; box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 1), inset 0 -8px 12px -9px rgba(120, 150, 255, .45), 0 8px 18px -10px rgba(79, 111, 224, .34) !important; } body.liquid-glass-preview.liquid-glass-preview #hist-pago-selector-btn:active, body.liquid-glass-preview.liquid-glass-preview .hist-pago-selector-btn:active, body.liquid-glass-preview.liquid-glass-preview .lg-capsule:active, body.liquid-glass-preview.liquid-glass-preview .pago-option:active { transform: translateY(0) scale(.985) !important; } body.liquid-glass-preview.liquid-glass-preview #hist-pago-selector-panel { background: radial-gradient(120% 70% at 12% 0%, rgba(255, 255, 255, .96), rgba(255, 255, 255, .62) 42%, rgba(248, 251, 255, .76) 100%) !important; border: 1px solid rgba(120, 150, 255, .42) !important; box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .96), inset 0 -14px 24px -24px rgba(79, 111, 224, .38), 0 20px 46px -26px rgba(30, 50, 120, .36) !important; -webkit-backdrop-filter: blur(13px) saturate(118%) !important; backdrop-filter: blur(13px) saturate(118%) !important; } body.liquid-glass-preview.liquid-glass-preview #hist-pago-selector-panel.lg-popover-reveal-active { animation: dioLGPopoverReveal .38s cubic-bezier(.18, .92, .22, 1) both !important; transform-origin: var(--lg-popover-origin-x, 50%) var(--lg-popover-origin-y, 50%) !important; will-change: clip-path, opacity, filter !important; backface-visibility: hidden !important; } body.liquid-glass-preview.liquid-glass-preview .lg-popover-bloom { z-index: 2147482800 !important; } /* Acordeón de meses en Historial ("Julio de 2026", "Junio de 2026"...): mismo vidrio burbuja que las cápsulas, para que combine con el resto. */ body.liquid-glass-preview.liquid-glass-preview .mes-seccion-header { background: linear-gradient(160deg, #ffffff 0%, #f2f6ff 55%, #e4ecff 100%) !important; border: 1px solid rgba(120, 150, 255, .35) !important; /* Forma de píldora/cápsula completa (no solo esquinas redondeadas) */ border-radius: 999px !important; box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .95), inset 0 -6px 10px -8px rgba(120, 150, 255, .35), 0 4px 12px -6px rgba(79, 111, 224, .22) !important; padding-left: 18px !important; padding-right: 18px !important; transition: transform .2s ease, box-shadow .2s ease !important; } body.liquid-glass-preview.liquid-glass-preview .mes-seccion-header:hover { transform: translateY(-2px) !important; box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .95), inset 0 -6px 10px -8px rgba(120, 150, 255, .35), 0 8px 18px -8px rgba(79, 111, 224, .32) !important; } /* ---------- Modal "Control de Caja Diario" (Detalle del Día en Liquid Glass) ---------- */ body.liquid-glass-preview.liquid-glass-preview #modal-dia .modal-content { border-radius: 28px !important; background: linear-gradient(160deg, rgba(255, 255, 255, 0.95), rgba(240, 247, 255, 0.86)) !important; -webkit-backdrop-filter: blur(28px) saturate(140%) !important; backdrop-filter: blur(28px) saturate(140%) !important; border: 1.5px solid rgba(255, 255, 255, 0.95) !important; box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 1), 0 28px 70px -10px rgba(37, 99, 235, 0.2), 0 12px 28px -6px rgba(15, 23, 42, 0.08) !important; } body.liquid-glass-preview.liquid-glass-preview .modal-dia-header-premium { background: linear-gradient(135deg, rgba(255, 255, 255, 0.85), rgba(240, 248, 255, 0.72)) !important; -webkit-backdrop-filter: blur(24px) saturate(130%) !important; backdrop-filter: blur(24px) saturate(130%) !important; border-bottom: 1px solid rgba(226, 232, 240, 0.8) !important; padding: 14px 22px !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1), 0 4px 16px rgba(0, 0, 0, 0.02) !important; } body.liquid-glass-preview.liquid-glass-preview .modal-dia-header-premium #modal-titulo { color: #0f172a !important; font-size: 1.15rem !important; font-weight: 900 !important; } body.liquid-glass-preview.liquid-glass-preview .modal-dia-header-premium span { color: #64748b !important; font-weight: 700 !important; } body.liquid-glass-preview.liquid-glass-preview .btn-header-dia, body.liquid-glass-preview.liquid-glass-preview #modal-dia-actions button, body.liquid-glass-preview.liquid-glass-preview #modal-dia-actions .btn-shortcut { background: rgba(255, 255, 255, 0.88) !important; border: 1px solid rgba(255, 255, 255, 0.95) !important; -webkit-backdrop-filter: blur(8px) !important; backdrop-filter: blur(8px) !important; color: #1e3a8a !important; font-weight: 700 !important; border-radius: 999px !important; padding: 6px 14px !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04), inset 0 1px 0 #fff !important; transition: all 0.2s cubic-bezier(.16,1,.22,1) !important; } body.liquid-glass-preview.liquid-glass-preview .btn-header-dia:hover, body.liquid-glass-preview.liquid-glass-preview #modal-dia-actions button:hover, body.liquid-glass-preview.liquid-glass-preview #modal-dia-actions .btn-shortcut:hover { background: #ffffff !important; color: #2563eb !important; transform: translateY(-2px) !important; box-shadow: 0 6px 16px rgba(37, 99, 235, 0.15) !important; } body.liquid-glass-preview.liquid-glass-preview .btn-header-dia-primary, body.liquid-glass-preview.liquid-glass-preview #modal-dia-actions .btn-header-dia-primary { background: linear-gradient(135deg, #2563eb, #1d4ed8) !important; color: #ffffff !important; border: none !important; box-shadow: 0 4px 14px rgba(37, 99, 235, 0.32) !important; } body.liquid-glass-preview.liquid-glass-preview .btn-header-dia-primary:hover { background: linear-gradient(135deg, #1d4ed8, #1e40af) !important; color: #ffffff !important; transform: translateY(-2px) !important; box-shadow: 0 6px 18px rgba(37, 99, 235, 0.42) !important; } body.liquid-glass-preview.liquid-glass-preview .modal-dia-header-premium #modal-total { color: #1e3a8a !important; font-size: 1.25rem !important; font-weight: 900 !important; } body.liquid-glass-preview.liquid-glass-preview #btn-maximize-modal-dia, body.liquid-glass-preview.liquid-glass-preview #modal-dia .btn-close-modal { background: rgba(255, 255, 255, 0.8) !important; border: 1px solid rgba(226, 232, 240, 0.9) !important; color: #475569 !important; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04) !important; transition: all 0.2s ease !important; } body.liquid-glass-preview.liquid-glass-preview #btn-maximize-modal-dia:hover, body.liquid-glass-preview.liquid-glass-preview #modal-dia .btn-close-modal:hover { background: #ffffff !important; color: #0f172a !important; transform: scale(1.08) !important; } /* Cápsula de Totales y Métodos de Pago en el Día */ body.liquid-glass-preview.liquid-glass-preview #modal-body-ventas > div:first-child, body.liquid-glass-preview.liquid-glass-preview .resumen-totales-dia { background: rgba(255, 255, 255, 0.72) !important; -webkit-backdrop-filter: blur(16px) !important; backdrop-filter: blur(16px) !important; border: 1px solid rgba(255, 255, 255, 0.95) !important; border-radius: 20px !important; box-shadow: 0 8px 24px -6px rgba(0, 0, 0, 0.04), inset 0 1px 0 #ffffff !important; } /* Tarjetas de cada orden dentro del día */ body.liquid-glass-preview.liquid-glass-preview .venta-card { background: #ffffff !important; border: 1px solid rgba(226, 232, 240, 0.9) !important; border-left: 3.5px solid #2563eb !important; border-radius: 20px !important; box-shadow: 0 8px 22px -6px rgba(15, 23, 42, 0.06), inset 0 1px 0 #ffffff !important; transition: transform 0.24s cubic-bezier(.16,1,.22,1), box-shadow 0.24s cubic-bezier(.16,1,.22,1) !important; } body.liquid-glass-preview.liquid-glass-preview .venta-card:hover { transform: translateY(-4px) !important; box-shadow: 0 16px 36px -8px rgba(37, 99, 235, 0.16) !important; } body.liquid-glass-preview.liquid-glass-preview .venta-card .btn-icon-soft, body.liquid-glass-preview.liquid-glass-preview .venta-card button { border-radius: 10px !important; transition: all 0.15s ease !important; } body.liquid-glass-preview.liquid-glass-preview .venta-card button:hover { transform: scale(1.08) !important; } /* ---------- Cajas con color fijo "a la antigua" en templates (id, no clase) ---------- */ /* Estas traen background/border inline en el HTML — solo un !important por id las alcanza a corregir. Si aparecen más parches de color sueltos, van aquí. */ body.liquid-glass-preview.liquid-glass-preview #section-empresa-fe { background: linear-gradient(160deg, rgba(79, 111, 224, .14), rgba(139, 92, 246, .08) 55%, transparent), linear-gradient(155deg, var(--glass-fill), rgba(255, 255, 255, .42)) !important; -webkit-backdrop-filter: blur(11px) saturate(120%) !important; backdrop-filter: blur(11px) saturate(120%) !important; border: 1px solid rgba(79, 111, 224, .26) !important; } body.liquid-glass-preview.liquid-glass-preview #fe-pos-status { background: rgba(255, 255, 255, .5) !important; border: 1px dashed rgba(79, 111, 224, .35) !important; } body.liquid-glass-preview.liquid-glass-preview #cliente-btn-buscar-dian { background: rgba(79, 111, 224, .16) !important; border: 1px solid rgba(79, 111, 224, .35) !important; } /* Más parches de color fijo dentro del panel de Punto de Venta: en vez de darles su propio vidrio, los hacemos transparentes para que se vea el mismo cristal del panel padre por debajo (sin costura de dos tonos). */ body.liquid-glass-preview.liquid-glass-preview .premium-panel-container { background: transparent !important; box-shadow: none !important; } body.liquid-glass-preview.liquid-glass-preview #cart-empty-state { background: transparent !important; border: 2px dashed rgba(79, 111, 224, .3) !important; border-radius: 16px !important; } /* ---------- Historial: tarjetas de día ---------- */ /* Sin backdrop-filter a propósito: en Historial puede haber 20-30+ de estas tarjetas en pantalla a la vez (una por día del mes), y cada una con blur propio es un golpe fuerte de GPU — en equipos con gráficos integrados se siente lento/traba. El degradado + borde ya da la sensación de vidrio sin ese costo. */ body.liquid-glass-preview.liquid-glass-preview .card-dia { background: linear-gradient(160deg, rgba(79, 111, 224, .1), rgba(139, 92, 246, .05) 60%, transparent), linear-gradient(155deg, var(--glass-fill), rgba(255, 255, 255, .42)) !important; border: 1px solid var(--glass-stroke-lo) !important; border-radius: 20px !important; box-shadow: inset 0 1px 0 var(--glass-stroke-hi), var(--card-shadow) !important; } body.liquid-glass-preview.liquid-glass-preview .card-dia * { color: var(--text-onglass); } /* La fila de "Gastos" (rojo), sus subtotales por método de pago (rojo oscuro) y "Efe. Neto" (verde) traen el color puesto en línea en el div contenedor y los de adentro lo heredan — pero la regla de arriba les pone un color EXPLÍCITO a esos spans (por el "*"), y un valor declarado directo siempre le gana a lo heredado, así que se veían en el gris oscuro del vidrio en vez de su color real. Los devolvemos buscando el color puesto en línea (no hay clases propias para engancharse). */ body.liquid-glass-preview.liquid-glass-preview .card-dia [style*="color:#dc2626"], body.liquid-glass-preview.liquid-glass-preview .card-dia [style*="color:#dc2626"] * { color: #dc2626 !important; } body.liquid-glass-preview.liquid-glass-preview .card-dia [style*="color:#991b1b"], body.liquid-glass-preview.liquid-glass-preview .card-dia [style*="color:#991b1b"] * { color: #991b1b !important; } body.liquid-glass-preview.liquid-glass-preview .card-dia [style*="color:#166534"], body.liquid-glass-preview.liquid-glass-preview .card-dia [style*="color:#166534"] * { color: #166534 !important; } /* Píldora del total del día: degradado azul "burbuja" (brillante, con reflejo arriba) en vez del morado/plano de antes. */ body.liquid-glass-preview.liquid-glass-preview .dia-total-card { background: linear-gradient(160deg, #eaf1ff 0%, #cfe0ff 55%, #b9d0ff 100%) !important; color: #1d3fa8 !important; border: 1px solid rgba(120, 150, 255, .5) !important; box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .9), inset 0 -8px 12px -8px rgba(120, 150, 255, .4), 0 6px 14px -6px rgba(79, 111, 224, .35) !important; } /* ---------- Meta del día / tarjetas de acciones rápidas ---------- */ /* Sin backdrop-filter: son varias tarjetas de "Acciones rápidas" a la vez. */ body.liquid-glass-preview.liquid-glass-preview .dxp-meta, body.liquid-glass-preview.liquid-glass-preview .dxp-meta-v2, body.liquid-glass-preview.liquid-glass-preview .dxp-qcard { background: var(--glass-fill-strong) !important; border: 1px solid var(--glass-stroke-lo) !important; border-radius: 16px !important; } body.liquid-glass-preview.liquid-glass-preview .dxp-meta *, body.liquid-glass-preview.liquid-glass-preview .dxp-meta-v2 *, body.liquid-glass-preview.liquid-glass-preview .dxp-qcard-t, body.liquid-glass-preview.liquid-glass-preview .dxp-qcard-s { color: var(--text-onglass) !important; text-shadow: none !important; } body.liquid-glass-preview.liquid-glass-preview #dashboard-citas-contenedor > div, body.liquid-glass-preview.liquid-glass-preview #dashboard-ordenes-hoy-contenedor > div { background: rgba(120, 140, 220, .06) !important; border-color: var(--glass-stroke-lo) !important; border-radius: 14px !important; color: var(--text-onglass-dim) !important; } body.liquid-glass-preview.liquid-glass-preview .dxp-sync { background: var(--glass-fill-strong) !important; border: 1px solid var(--glass-stroke-lo) !important; color: var(--text-onglass) !important; } /* ---------- Botones ---------- */ body.liquid-glass-preview.liquid-glass-preview .btn-pos-primary, body.liquid-glass-preview.liquid-glass-preview .dxp-btn.primary { background: linear-gradient(90deg, var(--glass-brand), var(--glass-violet)) !important; border: none !important; border-radius: 999px !important; box-shadow: 0 10px 24px -10px rgba(79, 111, 224, .55) !important; color: #fff !important; } body.liquid-glass-preview.liquid-glass-preview .btn-pos-outline, body.liquid-glass-preview.liquid-glass-preview .dxp-btn { background: rgba(120, 140, 220, .08) !important; -webkit-backdrop-filter: blur(8px) !important; backdrop-filter: blur(8px) !important; border: 1px solid var(--glass-stroke-lo) !important; border-radius: 999px !important; color: var(--text-onglass) !important; text-shadow: none !important; } /* ---------- Modales de SweetAlert2 (Traslado entre sedes, etc.) ---------- */ /* Estos modales son de una librería aparte (SweetAlert2), con su propio look por defecto — se veían como una ventana blanca genérica sin nada de vidrio. Vestimos el marco del popup para que combine; el contenido interno trae colores fijos en línea (no los tocamos, ya funcionan bien sobre blanco). */ body.liquid-glass-preview.liquid-glass-preview .swal2-popup { background: linear-gradient(155deg, rgba(255, 255, 255, .96), rgba(255, 255, 255, .88)) !important; -webkit-backdrop-filter: blur(16px) saturate(115%) !important; backdrop-filter: blur(16px) saturate(115%) !important; border: 1px solid var(--glass-stroke-lo) !important; border-radius: 24px !important; box-shadow: inset 0 1px 0 var(--glass-stroke-hi), var(--card-shadow) !important; } /* La tabla de productos del Traslado tiene 6 columnas con texto (Producto, SKU, Categoría, Stock...) — en pantallas angostas no caben apretadas y el navegador termina partiendo las palabras letra por letra. La app YA tiene este mismo arreglo (scroll horizontal en vez de columnas aplastadas) para cuando corre empaquetada como app Android nativa (body.capacitor-android en css/mobile-android.css) — lo traemos acá para que también funcione en navegador móvil normal. */ @media (max-width: 640px) { body.liquid-glass-preview.liquid-glass-preview .swal2-container .swal2-popup { width: calc(100vw - 20px) !important; max-width: calc(100vw - 20px) !important; padding: 16px !important; } body.liquid-glass-preview.liquid-glass-preview .swal2-html-container { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; padding: 0 !important; margin: 0 !important; } body.liquid-glass-preview.liquid-glass-preview .swal2-html-container [style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: 1fr !important; } /* El div que envuelve la tabla (max-height:400px;overflow-y:auto, puesto en línea en el HTML) es el que debe scrollear horizontalmente — "display:block" en la propia rompe el algoritmo de layout de tablas (sus hijos siguen siendo thead/tr/td con display de tabla) y termina sin efecto visual real. Dejamos la tabla como tabla, solo con ancho explícito. */ body.liquid-glass-preview.liquid-glass-preview .swal2-html-container div[style*="overflow-y"] { overflow-x: auto !important; } body.liquid-glass-preview.liquid-glass-preview .swal2-html-container table { /* La tabla trae style="width:100%" en línea, que le gana a cualquier ancho de hoja de estilo salvo que también forcemos "width" (no solo min-width) — si no, nunca llega a ser más ancha que el popup y el texto se sigue apretando en vez de scrollear. 440px (el valor que usa la app empaquetada como Android) resultó insuficiente para 6 columnas con nombres largos de categoría — con más aire (640px) cada columna cabe en una sola línea. */ width: 640px !important; min-width: 640px !important; font-size: 12px !important; -webkit-overflow-scrolling: touch !important; } /* Los
traen padding:12px en línea — con columnas angostas eso solo deja ~20px de texto real. Lo achicamos igual que ya hacíamos con las celdas de datos (.traslado-row td). */ body.liquid-glass-preview.liquid-glass-preview .swal2-html-container table th { padding: 8px 6px !important; } body.liquid-glass-preview.liquid-glass-preview .swal2-html-container .traslado-row td { padding: 6px 4px !important; } body.liquid-glass-preview.liquid-glass-preview .swal2-actions { flex-direction: column !important; gap: 8px !important; } body.liquid-glass-preview.liquid-glass-preview .swal2-actions button { width: 100% !important; } body.liquid-glass-preview.liquid-glass-preview .swal2-title { font-size: 1.1rem !important; padding: 0 0 8px 0 !important; } } /* ------------------------------------------------------------------------- Liquid Tabs v2 Reinicio final de las pestañas: expansion contextual + lente de vidrio. ------------------------------------------------------------------------- */ body.liquid-glass-preview.liquid-glass-preview .main-nav { --lg-tab-w: 78px; --lg-tab-h: 58px; min-height: 96px !important; padding: 10px 18px !important; border-radius: 40px !important; overflow: visible !important; background: radial-gradient(100% 120% at 10% 0%, rgba(255,255,255,.82), rgba(222,236,255,.48) 44%, rgba(159,197,255,.2) 76%), radial-gradient(90% 140% at 92% 10%, rgba(67,133,255,.38), rgba(195,219,255,.24) 48%, transparent 72%), linear-gradient(118deg, rgba(255,255,255,.56), rgba(214,231,255,.44) 48%, rgba(120,174,255,.3)) !important; -webkit-backdrop-filter: blur(16px) saturate(125%) !important; backdrop-filter: blur(16px) saturate(125%) !important; border: 1px solid rgba(255,255,255,.72) !important; box-shadow: inset 0 1.5px 0 rgba(255,255,255,.95), inset 0 -20px 34px -34px rgba(37,99,235,.46), 0 24px 54px -30px rgba(37,99,235,.44) !important; } body.liquid-glass-preview.liquid-glass-preview .main-nav .nav-content { gap: 14px !important; align-items: center !important; overflow: visible !important; /* min-width:100% (no 0): .main-nav es flex y .nav-content es su único hijo — sin forzar el ancho completo, el flex item se encoge a su contenido y .main-nav lo centra como un bloque, dejando el logo y la zona de usuario pegados entre sí en el medio con huecos simétricos a los costados en vez de fijos en cada esquina (regresión vs. el nav clásico, que sí fuerza min-width:100% en styles.css). */ min-width: 100% !important; } body.liquid-glass-preview.liquid-glass-preview .main-nav .brand-inner { background: #fff !important; } body.liquid-glass-preview.liquid-glass-preview .main-nav .nav-items { position: relative !important; display: flex !important; flex: 0 1 auto !important; align-items: center !important; gap: 4px !important; height: 72px !important; min-width: 0 !important; max-width: min(66vw, 740px) !important; padding: 7px !important; overflow: hidden !important; border-radius: 30px !important; background: radial-gradient(100% 85% at 12% 0%, rgba(255,255,255,.7), rgba(255,255,255,.28) 56%, transparent 84%), rgba(255,255,255,.18) !important; border: 1px solid rgba(255,255,255,.48) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.76), inset 0 -14px 22px -24px rgba(37,99,235,.42) !important; transition: max-width .34s cubic-bezier(.2,.9,.2,1), background .22s ease, box-shadow .22s ease !important; } body.liquid-glass-preview.liquid-glass-preview .main-nav .nav-items.lg-apple-nav-expanded { max-width: min(72vw, 860px) !important; } body.liquid-glass-preview.liquid-glass-preview .main-nav .nav-section { display: flex !important; align-items: center !important; flex: 0 0 auto !important; min-width: 0 !important; max-width: var(--lg-tab-w) !important; overflow: hidden !important; border-radius: 22px !important; background: transparent !important; border: 1px solid transparent !important; box-shadow: none !important; transition: max-width .34s cubic-bezier(.2,.9,.2,1), opacity .18s ease, transform .28s cubic-bezier(.2,.9,.2,1), background .2s ease, border-color .2s ease !important; } body.liquid-glass-preview.liquid-glass-preview .main-nav .nav-section.lg-apple-expanded { max-width: min(62vw, 560px) !important; padding-right: 5px !important; overflow: visible !important; background: radial-gradient(110% 90% at 14% 0%, rgba(255,255,255,.62), rgba(255,255,255,.2) 62%, transparent 88%), rgba(255,255,255,.14) !important; border-color: rgba(255,255,255,.44) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.56), 0 16px 30px -26px rgba(37,99,235,.36) !important; } body.liquid-glass-preview.liquid-glass-preview .main-nav .nav-item, body.liquid-glass-preview.liquid-glass-preview .main-nav .nav-section-toggle { position: relative !important; flex: 0 0 var(--lg-tab-w) !important; width: var(--lg-tab-w) !important; min-width: var(--lg-tab-w) !important; max-width: var(--lg-tab-w) !important; height: var(--lg-tab-h) !important; min-height: var(--lg-tab-h) !important; max-height: var(--lg-tab-h) !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 4px !important; padding: 6px 7px !important; border-radius: 20px !important; overflow: hidden !important; background: radial-gradient(120% 94% at 50% -30%, rgba(255,255,255,.48), transparent 62%), rgba(255,255,255,.1) !important; border: 1px solid rgba(255,255,255,.2) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.38) !important; transform: translateZ(0) !important; transition: opacity .18s ease, transform .24s cubic-bezier(.2,.9,.2,1), background .18s ease, border-color .18s ease, color .18s ease !important; } body.liquid-glass-preview.liquid-glass-preview .main-nav .nav-item:hover, body.liquid-glass-preview.liquid-glass-preview .main-nav .nav-section-toggle:hover { background: rgba(255,255,255,.2) !important; border-color: rgba(255,255,255,.34) !important; } body.liquid-glass-preview.liquid-glass-preview .main-nav .nav-item.active, body.liquid-glass-preview.liquid-glass-preview .main-nav .nav-section-collapsible.has-active > .nav-section-toggle { background: radial-gradient(118% 92% at 22% 0%, rgba(255,255,255,.62), transparent 58%), linear-gradient(180deg, rgba(88,154,255,.98), rgba(40,96,236,.98)) !important; border-color: rgba(255,255,255,.5) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.72), inset 0 -16px 24px -24px rgba(10,30,90,.76), 0 14px 24px -18px rgba(37,99,235,.74) !important; } body.liquid-glass-preview.liquid-glass-preview .main-nav .nav-item > span:not(.material-symbols-outlined):not(#nav-cart-badge), body.liquid-glass-preview.liquid-glass-preview .main-nav .nav-section-toggle > span:not(.material-symbols-outlined) { max-width: 100% !important; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", system-ui, sans-serif !important; font-size: .58rem !important; line-height: 1.05 !important; font-weight: 780 !important; letter-spacing: 0 !important; text-align: center !important; color: #102b62 !important; text-shadow: 0 1px 0 rgba(255,255,255,.62) !important; transform: none !important; } body.liquid-glass-preview.liquid-glass-preview .main-nav .nav-item > .material-symbols-outlined, body.liquid-glass-preview.liquid-glass-preview .main-nav .nav-section-toggle > .material-symbols-outlined { font-family: "Material Symbols Outlined" !important; font-size: 1.08rem !important; line-height: 1 !important; font-weight: normal !important; letter-spacing: normal !important; text-transform: none !important; color: #102b62 !important; text-shadow: 0 1px 0 rgba(255,255,255,.62) !important; transform: none !important; } body.liquid-glass-preview.liquid-glass-preview .main-nav .nav-section-toggle > .nav-section-arrow.material-symbols-outlined { font-size: .78rem !important; opacity: .8 !important; } body.liquid-glass-preview.liquid-glass-preview .main-nav .nav-item.active > span, body.liquid-glass-preview.liquid-glass-preview .main-nav .nav-item.active > .material-symbols-outlined, body.liquid-glass-preview.liquid-glass-preview .main-nav .nav-section-collapsible.has-active > .nav-section-toggle > span, body.liquid-glass-preview.liquid-glass-preview .main-nav .nav-section-collapsible.has-active > .nav-section-toggle > .material-symbols-outlined { color: #fff !important; text-shadow: 0 1px 2px rgba(8,26,76,.46) !important; } body.liquid-glass-preview.liquid-glass-preview .main-nav .nav-section-items { position: static !important; display: flex !important; flex-direction: row !important; align-items: center !important; gap: 5px !important; flex: 0 1 auto !important; width: auto !important; min-width: 0 !important; max-width: 0 !important; height: var(--lg-tab-h) !important; max-height: var(--lg-tab-h) !important; padding: 0 !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; overflow: hidden !important; transform: translate3d(-10px,0,0) scale(.98) !important; transform-origin: left center !important; background: transparent !important; border: 0 !important; box-shadow: none !important; transition: max-width .34s cubic-bezier(.2,.9,.2,1), opacity .18s ease, transform .28s cubic-bezier(.2,.9,.2,1), visibility 0s linear .2s !important; } body.liquid-glass-preview.liquid-glass-preview .main-nav .nav-section.lg-apple-expanded > .nav-section-items { max-width: min(52vw, 440px) !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; overflow: visible !important; transform: translate3d(0,0,0) scale(1) !important; transition: max-width .34s cubic-bezier(.2,.9,.2,1), opacity .16s ease, transform .28s cubic-bezier(.2,.9,.2,1), visibility 0s !important; } body.liquid-glass-preview.liquid-glass-preview .main-nav .nav-section.lg-apple-expanded .nav-section-items .nav-item { display: flex !important; flex: 0 0 72px !important; width: 72px !important; min-width: 72px !important; max-width: 72px !important; height: 52px !important; min-height: 52px !important; max-height: 52px !important; padding: 5px 6px !important; border-radius: 17px !important; } body.liquid-glass-preview.liquid-glass-preview .main-nav .nav-section.lg-apple-expanded .nav-section-items .nav-item > span:not(.material-symbols-outlined):not(#nav-cart-badge) { font-size: .53rem !important; line-height: 1.05 !important; } body.liquid-glass-preview.liquid-glass-preview .main-nav .nav-section.lg-apple-expanded .nav-section-items .nav-item > .material-symbols-outlined { font-size: 1rem !important; } body.liquid-glass-preview.liquid-glass-preview .main-nav .lg-apple-hidden { flex-basis: 0 !important; width: 0 !important; min-width: 0 !important; max-width: 0 !important; padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; border-width: 0 !important; opacity: 0 !important; pointer-events: none !important; overflow: hidden !important; transform: translate3d(-8px,0,0) scale(.92) !important; } body.liquid-glass-preview.liquid-glass-preview .main-nav.lg-apple-nav-expanded .nav-actions { min-width: 0 !important; flex: 0 1 auto !important; } body.liquid-glass-preview.liquid-glass-preview .main-nav.lg-apple-nav-expanded .inline-search-pill { width: 54px !important; min-width: 54px !important; max-width: 54px !important; padding-inline: 14px !important; overflow: hidden !important; transition: width .28s cubic-bezier(.2,.9,.2,1), min-width .28s cubic-bezier(.2,.9,.2,1), max-width .28s cubic-bezier(.2,.9,.2,1), padding .28s cubic-bezier(.2,.9,.2,1) !important; } body.liquid-glass-preview.liquid-glass-preview .main-nav.lg-apple-nav-expanded #inline-search-input, body.liquid-glass-preview.liquid-glass-preview .main-nav.lg-apple-nav-expanded .keyboard-shortcut { opacity: 0 !important; pointer-events: none !important; } body.liquid-glass-preview.liquid-glass-preview .main-nav .lg-nav-hover-lens { position: absolute !important; left: 0 !important; top: 0 !important; width: var(--lg-nav-lens-w, 72px) !important; height: var(--lg-nav-lens-h, 54px) !important; z-index: 120 !important; pointer-events: none !important; opacity: 0 !important; border-radius: 24px !important; overflow: hidden !important; transform: translate3d(var(--lg-nav-lens-x, 0px), var(--lg-nav-lens-y, 0px), 0) scale(.92) !important; background: radial-gradient(120% 86% at 20% 0%, rgba(255,255,255,.96), rgba(255,255,255,.46) 38%, rgba(255,255,255,.12) 68%), linear-gradient(150deg, rgba(255,255,255,.58), rgba(255,255,255,.18) 58%, rgba(255,255,255,.44)) !important; border: 1px solid rgba(255,255,255,.76) !important; -webkit-backdrop-filter: blur(13px) saturate(130%) !important; backdrop-filter: blur(13px) saturate(130%) !important; box-shadow: inset 0 1.5px 0 rgba(255,255,255,.98), inset 10px 0 24px -20px rgba(255,255,255,.92), inset -16px -12px 30px -24px rgba(52,102,214,.5), 0 16px 34px -20px rgba(20,45,120,.36) !important; contain: layout paint !important; will-change: transform, width, height, opacity !important; transition: transform .32s cubic-bezier(.16,1,.22,1), width .32s cubic-bezier(.16,1,.22,1), height .32s cubic-bezier(.16,1,.22,1), opacity .12s ease !important; } body.liquid-glass-preview.liquid-glass-preview .main-nav.lg-nav-hovering .lg-nav-hover-lens { opacity: .97 !important; transform: translate3d(var(--lg-nav-lens-x, 0px), var(--lg-nav-lens-y, 0px), 0) scale(1) !important; } body.liquid-glass-preview.liquid-glass-preview .main-nav .lg-nav-hover-lens::before { content: "" !important; position: absolute !important; inset: 5px 8px auto 8px !important; height: 42% !important; border-radius: inherit !important; background: linear-gradient(180deg, rgba(255,255,255,.82), transparent) !important; opacity: .82 !important; } body.liquid-glass-preview.liquid-glass-preview .main-nav .lg-nav-hover-lens::after { content: "" !important; position: absolute !important; inset: 9px 7px !important; border-radius: inherit !important; background: linear-gradient(90deg, rgba(8,16,32,.2), transparent 12%, transparent 88%, rgba(8,16,32,.22)), radial-gradient(70% 90% at 0% 50%, rgba(255,255,255,.58), transparent 44%), radial-gradient(70% 90% at 100% 50%, rgba(255,255,255,.5), transparent 44%) !important; opacity: .54 !important; } body.liquid-glass-preview.liquid-glass-preview .main-nav .lg-nav-lens-content { position: absolute !important; inset: 0 !important; z-index: 2 !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 3px !important; color: #071632 !important; text-shadow: 0 1px 0 rgba(255,255,255,.84) !important; transform: translate3d(0,-1px,0) scale(1.08) !important; transform-origin: center center !important; } body.liquid-glass-preview.liquid-glass-preview .main-nav .lg-nav-hover-lens.lg-nav-lens-active .lg-nav-lens-content { color: #fff !important; text-shadow: 0 1px 2px rgba(8,26,76,.5) !important; } body.liquid-glass-preview.liquid-glass-preview .main-nav .lg-nav-lens-icon { font-family: "Material Symbols Outlined" !important; font-size: 1.16rem !important; line-height: 1 !important; font-weight: normal !important; letter-spacing: normal !important; text-transform: none !important; } body.liquid-glass-preview.liquid-glass-preview .main-nav .lg-nav-lens-text { max-width: calc(100% - 12px) !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", system-ui, sans-serif !important; font-size: .65rem !important; line-height: 1 !important; font-weight: 820 !important; letter-spacing: 0 !important; } body.liquid-glass-preview.liquid-glass-preview .main-nav .nav-item.lg-nav-lens-target > span, body.liquid-glass-preview.liquid-glass-preview .main-nav .nav-section-toggle.lg-nav-lens-target > span { opacity: .12 !important; } body.liquid-glass-preview.liquid-glass-preview .main-nav .nav-item.lg-nav-pressing, body.liquid-glass-preview.liquid-glass-preview .main-nav .nav-section-toggle.lg-nav-pressing { transform: translateZ(0) scale(.985) !important; } /* Liquid Tabs v2.1: expansion inline sin ocultar pestañas. Si no hay espacio suficiente, el carril se desplaza dentro de la cápsula. */ body.liquid-glass-preview.liquid-glass-preview .main-nav .nav-items { flex: 1 1 auto !important; max-width: none !important; overflow-x: auto !important; overflow-y: visible !important; scrollbar-width: none !important; -ms-overflow-style: none !important; overscroll-behavior-inline: contain !important; } body.liquid-glass-preview.liquid-glass-preview .main-nav .nav-items::-webkit-scrollbar { display: none !important; } body.liquid-glass-preview.liquid-glass-preview .main-nav .nav-items.lg-apple-nav-expanded { max-width: none !important; } body.liquid-glass-preview.liquid-glass-preview .main-nav .lg-apple-hidden, body.liquid-glass-preview.liquid-glass-preview .main-nav .lg-nav-peer-hidden { display: flex !important; flex-basis: var(--lg-tab-w) !important; width: var(--lg-tab-w) !important; min-width: var(--lg-tab-w) !important; max-width: var(--lg-tab-w) !important; padding: 6px 7px !important; margin-left: 0 !important; margin-right: 0 !important; border-width: 1px !important; opacity: 1 !important; pointer-events: auto !important; overflow: hidden !important; transform: translateZ(0) !important; } body.liquid-glass-preview.liquid-glass-preview .main-nav .nav-section.lg-apple-hidden, body.liquid-glass-preview.liquid-glass-preview .main-nav .nav-section.lg-nav-peer-hidden { max-width: var(--lg-tab-w) !important; padding: 0 !important; } body.liquid-glass-preview.liquid-glass-preview .main-nav.lg-apple-nav-expanded .inline-search-pill { width: clamp(180px, 18vw, 320px) !important; min-width: 180px !important; max-width: 320px !important; padding-inline: 16px !important; } body.liquid-glass-preview.liquid-glass-preview .main-nav.lg-apple-nav-expanded #inline-search-input, body.liquid-glass-preview.liquid-glass-preview .main-nav.lg-apple-nav-expanded .keyboard-shortcut { opacity: 1 !important; pointer-events: auto !important; } body.liquid-glass-preview.liquid-glass-preview .main-nav .nav-section.lg-apple-expanded { max-width: min(54vw, 520px) !important; flex: 0 0 auto !important; } body.liquid-glass-preview.liquid-glass-preview .main-nav .nav-section.lg-apple-expanded > .nav-section-items { max-width: min(42vw, 420px) !important; overflow-x: auto !important; overflow-y: hidden !important; scrollbar-width: none !important; } body.liquid-glass-preview.liquid-glass-preview .main-nav .nav-section.lg-apple-expanded > .nav-section-items::-webkit-scrollbar { display: none !important; } /* Liquid Tabs v2.2: hover expande, flecha coherente y reserva para la lupa. */ body.liquid-glass-preview.liquid-glass-preview .main-nav .nav-content { gap: 18px !important; } body.liquid-glass-preview.liquid-glass-preview .main-nav .nav-items { margin-right: 10px !important; max-width: calc(100% - 96px) !important; padding-right: 10px !important; } body.liquid-glass-preview.liquid-glass-preview .main-nav .nav-actions { position: relative !important; z-index: 130 !important; flex: 0 0 auto !important; margin-left: 8px !important; } body.liquid-glass-preview.liquid-glass-preview .main-nav .inline-search-pill { position: relative !important; z-index: 131 !important; } body.liquid-glass-preview.liquid-glass-preview .main-nav .nav-section-collapsible.collapsed > .nav-section-toggle > .nav-section-arrow.material-symbols-outlined { transform: rotate(-90deg) !important; } body.liquid-glass-preview.liquid-glass-preview .main-nav .nav-section-collapsible:not(.collapsed) > .nav-section-toggle > .nav-section-arrow.material-symbols-outlined, body.liquid-glass-preview.liquid-glass-preview .main-nav .nav-section-collapsible.lg-apple-hover-open > .nav-section-toggle > .nav-section-arrow.material-symbols-outlined { transform: rotate(0deg) !important; } body.liquid-glass-preview.liquid-glass-preview .main-nav .nav-section-toggle > .nav-section-arrow.material-symbols-outlined { transition: transform .22s cubic-bezier(.2,.9,.2,1), opacity .18s ease !important; } body.liquid-glass-preview.liquid-glass-preview .main-nav .nav-section-collapsible.lg-apple-hover-open { max-width: min(54vw, 520px) !important; } body.liquid-glass-preview.liquid-glass-preview .main-nav .nav-section-collapsible.lg-apple-hover-open > .nav-section-items { max-width: min(42vw, 420px) !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; overflow-x: auto !important; overflow-y: hidden !important; transform: translate3d(0,0,0) scale(1) !important; } /* Liquid Tabs v2.3: categorias claras, inicio sin recorte y busqueda colapsada. */ body.liquid-glass-preview.liquid-glass-preview .main-nav .nav-items { padding-left: 18px !important; padding-right: 14px !important; scroll-padding-inline: 18px !important; max-width: calc(100% - 78px) !important; } body.liquid-glass-preview.liquid-glass-preview .main-nav #tab-inicio { margin-left: 0 !important; flex: 0 0 82px !important; width: 82px !important; min-width: 82px !important; max-width: 82px !important; z-index: 3 !important; } body.liquid-glass-preview.liquid-glass-preview .main-nav .nav-section-toggle { background: radial-gradient(120% 92% at 50% -26%, rgba(255,255,255,.58), transparent 62%), rgba(255,255,255,.18) !important; border-color: rgba(255,255,255,.34) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.54), inset 0 -10px 18px -22px rgba(37,99,235,.44) !important; } body.liquid-glass-preview.liquid-glass-preview .main-nav .nav-section.lg-apple-expanded > .nav-section-toggle, body.liquid-glass-preview.liquid-glass-preview .main-nav .nav-section.lg-apple-hover-open > .nav-section-toggle { border-color: rgba(255,255,255,.58) !important; background: radial-gradient(130% 92% at 24% 0%, rgba(255,255,255,.72), transparent 56%), rgba(255,255,255,.26) !important; box-shadow: inset 0 1.5px 0 rgba(255,255,255,.82), 0 12px 22px -18px rgba(37,99,235,.42) !important; } body.liquid-glass-preview.liquid-glass-preview .main-nav .nav-section.lg-apple-expanded > .nav-section-items, body.liquid-glass-preview.liquid-glass-preview .main-nav .nav-section.lg-apple-hover-open > .nav-section-items { margin-left: 6px !important; padding-left: 8px !important; border-left: 1px solid rgba(16,43,98,.12) !important; background: linear-gradient(90deg, rgba(255,255,255,.22), rgba(255,255,255,.08)) !important; border-radius: 20px !important; } body.liquid-glass-preview.liquid-glass-preview .main-nav .nav-section.lg-apple-expanded .nav-section-items .nav-item, body.liquid-glass-preview.liquid-glass-preview .main-nav .nav-section.lg-apple-hover-open .nav-section-items .nav-item { flex: 0 0 68px !important; width: 68px !important; min-width: 68px !important; max-width: 68px !important; height: 50px !important; min-height: 50px !important; max-height: 50px !important; background: radial-gradient(120% 90% at 50% -32%, rgba(255,255,255,.48), transparent 62%), rgba(255,255,255,.1) !important; border-color: rgba(255,255,255,.22) !important; border-radius: 16px !important; } body.liquid-glass-preview.liquid-glass-preview .main-nav .nav-section-collapsible.collapsed > .nav-section-toggle > .nav-section-arrow.material-symbols-outlined { transform: rotate(-90deg) !important; } body.liquid-glass-preview.liquid-glass-preview .main-nav .nav-section-collapsible:not(.collapsed) > .nav-section-toggle > .nav-section-arrow.material-symbols-outlined, body.liquid-glass-preview.liquid-glass-preview .main-nav .nav-section-collapsible.lg-apple-hover-open > .nav-section-toggle > .nav-section-arrow.material-symbols-outlined { transform: rotate(0deg) !important; } body.liquid-glass-preview.liquid-glass-preview .main-nav .inline-search-wrapper { flex: 0 0 auto !important; } body.liquid-glass-preview.liquid-glass-preview .main-nav .inline-search-pill { width: 58px !important; min-width: 58px !important; max-width: 58px !important; height: 52px !important; padding: 0 15px !important; justify-content: center !important; overflow: hidden !important; border-radius: 999px !important; background: radial-gradient(120% 90% at 28% 0%, rgba(255,255,255,.72), rgba(255,255,255,.28) 54%, transparent 82%), rgba(255,255,255,.18) !important; border: 1px solid rgba(255,255,255,.5) !important; -webkit-backdrop-filter: blur(13px) saturate(125%) !important; backdrop-filter: blur(13px) saturate(125%) !important; transition: width .34s cubic-bezier(.16,1,.22,1), min-width .34s cubic-bezier(.16,1,.22,1), max-width .34s cubic-bezier(.16,1,.22,1), padding .34s cubic-bezier(.16,1,.22,1), box-shadow .22s ease, background .22s ease !important; } body.liquid-glass-preview.liquid-glass-preview .main-nav .inline-search-pill.lg-search-open, body.liquid-glass-preview.liquid-glass-preview .main-nav .inline-search-wrapper.lg-search-open .inline-search-pill { width: clamp(220px, 22vw, 360px) !important; min-width: 220px !important; max-width: 360px !important; padding: 0 16px !important; justify-content: flex-start !important; box-shadow: inset 0 1.5px 0 rgba(255,255,255,.88), 0 16px 30px -22px rgba(37,99,235,.42) !important; } body.liquid-glass-preview.liquid-glass-preview .main-nav #inline-search-input { width: 0 !important; min-width: 0 !important; opacity: 0 !important; pointer-events: none !important; padding: 0 !important; border: 0 !important; background: transparent !important; transition: width .28s cubic-bezier(.16,1,.22,1), opacity .18s ease !important; } body.liquid-glass-preview.liquid-glass-preview .main-nav .inline-search-pill.lg-search-open #inline-search-input, body.liquid-glass-preview.liquid-glass-preview .main-nav .inline-search-wrapper.lg-search-open #inline-search-input { width: 100% !important; min-width: 0 !important; opacity: 1 !important; pointer-events: auto !important; padding: 0 6px !important; } body.liquid-glass-preview.liquid-glass-preview .main-nav .inline-search-close { opacity: 0 !important; transition: opacity .18s ease !important; } body.liquid-glass-preview.liquid-glass-preview .main-nav .inline-search-pill.lg-search-open .inline-search-close, body.liquid-glass-preview.liquid-glass-preview .main-nav .inline-search-wrapper.lg-search-open .inline-search-close { opacity: 1 !important; } /* Liquid Tabs v3: expansion premium en bandeja separada, sin ocupar el carril. */ body.liquid-glass-preview.liquid-glass-preview .main-nav .nav-section, body.liquid-glass-preview.liquid-glass-preview .main-nav .nav-section.lg-apple-expanded, body.liquid-glass-preview.liquid-glass-preview .main-nav .nav-section.lg-apple-hover-open { max-width: var(--lg-tab-w) !important; padding-right: 0 !important; overflow: visible !important; background: transparent !important; border-color: transparent !important; box-shadow: none !important; } body.liquid-glass-preview.liquid-glass-preview .main-nav .nav-section-items, body.liquid-glass-preview.liquid-glass-preview .main-nav .nav-section.lg-apple-expanded > .nav-section-items, body.liquid-glass-preview.liquid-glass-preview .main-nav .nav-section.lg-apple-hover-open > .nav-section-items { display: none !important; max-width: 0 !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; } body.liquid-glass-preview.liquid-glass-preview .main-nav .nav-section.lg-apple-hover-open > .nav-section-toggle { transform: translate3d(0, -2px, 0) !important; background: radial-gradient(130% 92% at 24% 0%, rgba(255,255,255,.76), transparent 56%), rgba(255,255,255,.28) !important; border-color: rgba(255,255,255,.62) !important; box-shadow: inset 0 1.5px 0 rgba(255,255,255,.86), 0 14px 24px -20px rgba(37,99,235,.48) !important; } body.liquid-glass-preview.liquid-glass-preview .main-nav .lg-liquid-subnav-tray { position: absolute !important; left: var(--lg-subnav-x, 24px) !important; top: calc(100% - 8px) !important; width: var(--lg-subnav-w, 320px) !important; z-index: 160 !important; opacity: 0 !important; pointer-events: none !important; transform: translate3d(0, -10px, 0) scale(.94) !important; transform-origin: 48px top !important; transition: opacity .16s ease, transform .34s cubic-bezier(.16,1,.22,1), width .28s cubic-bezier(.16,1,.22,1) !important; will-change: transform, opacity, width !important; } body.liquid-glass-preview.liquid-glass-preview .main-nav .lg-liquid-subnav-tray.is-open { opacity: 1 !important; pointer-events: auto !important; transform: translate3d(0, 0, 0) scale(1) !important; } body.liquid-glass-preview.liquid-glass-preview .main-nav .lg-liquid-subnav-inner { display: flex !important; align-items: center !important; gap: 8px !important; min-height: 64px !important; padding: 8px !important; overflow-x: auto !important; overflow-y: hidden !important; scrollbar-width: none !important; border-radius: 26px !important; background: radial-gradient(120% 82% at 14% 0%, rgba(255,255,255,.86), rgba(255,255,255,.38) 52%, transparent 82%), linear-gradient(145deg, rgba(255,255,255,.38), rgba(214,231,255,.24)), rgba(255,255,255,.2) !important; border: 1px solid rgba(255,255,255,.68) !important; -webkit-backdrop-filter: blur(15px) saturate(125%) !important; backdrop-filter: blur(15px) saturate(125%) !important; box-shadow: inset 0 1.5px 0 rgba(255,255,255,.92), inset 16px 0 34px -28px rgba(255,255,255,.9), inset -18px -12px 36px -28px rgba(52,102,214,.38), 0 22px 44px -28px rgba(20,45,120,.42) !important; } body.liquid-glass-preview.liquid-glass-preview .main-nav .lg-liquid-subnav-inner::-webkit-scrollbar { display: none !important; } body.liquid-glass-preview.liquid-glass-preview .main-nav .lg-liquid-subnav-item { flex: 0 0 74px !important; width: 74px !important; height: 50px !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 3px !important; padding: 5px 6px !important; border-radius: 17px !important; border: 1px solid rgba(255,255,255,.24) !important; background: radial-gradient(120% 90% at 50% -32%, rgba(255,255,255,.52), transparent 62%), rgba(255,255,255,.14) !important; color: #102b62 !important; cursor: pointer !important; transform: translateZ(0) !important; transition: transform .22s cubic-bezier(.16,1,.22,1), background .18s ease, border-color .18s ease, box-shadow .18s ease !important; } body.liquid-glass-preview.liquid-glass-preview .main-nav .lg-liquid-subnav-item:hover, body.liquid-glass-preview.liquid-glass-preview .main-nav .lg-liquid-subnav-item.active { transform: translate3d(0, -2px, 0) !important; background: radial-gradient(120% 92% at 24% 0%, rgba(255,255,255,.66), transparent 58%), rgba(255,255,255,.28) !important; border-color: rgba(255,255,255,.55) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.72), 0 12px 22px -18px rgba(37,99,235,.42) !important; } body.liquid-glass-preview.liquid-glass-preview .main-nav .lg-liquid-subnav-item .material-symbols-outlined { font-family: "Material Symbols Outlined" !important; font-size: 1.05rem !important; line-height: 1 !important; color: #102b62 !important; } body.liquid-glass-preview.liquid-glass-preview .main-nav .lg-liquid-subnav-item span:not(.material-symbols-outlined) { max-width: 100% !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", system-ui, sans-serif !important; font-size: .54rem !important; line-height: 1 !important; font-weight: 780 !important; letter-spacing: 0 !important; color: #102b62 !important; } body.liquid-glass-preview.liquid-glass-preview .main-nav .inline-search-pill:not(.lg-search-open) { width: 58px !important; min-width: 58px !important; max-width: 58px !important; } /* ------------------------------------------------------------------------- Dioptrisoft Liquid Navigation V3 Componente nuevo: burbujas principales + subburbujas integradas. ------------------------------------------------------------------------- */ body.liquid-glass-preview.liquid-glass-preview .main-nav:is(.lg-v3-ready, .lgb-goo-ready) { --lg-v3-ice: rgba(242, 248, 255, .72); --lg-v3-ice-strong: rgba(255, 255, 255, .86); --lg-v3-blue: #2f74ff; --lg-v3-blue-deep: #174ed8; --lg-v3-text: #0a2a62; --lg-v3-muted: rgba(10, 42, 98, .62); --lg-v3-violet: rgba(150, 126, 255, .22); --lg-v3-stroke: rgba(255, 255, 255, .64); --lg-v3-shadow: 0 22px 54px -30px rgba(30, 77, 170, .46); --lg-v3-speed: 340ms; min-height: 108px !important; padding: 12px 18px !important; border-radius: 44px !important; overflow: visible !important; } body.liquid-glass-preview.liquid-glass-preview .main-nav:is(.lg-v3-ready, .lgb-goo-ready) .nav-center { display: none !important; } /* Arranque V3 sin parpadeo: en escritorio el JS diferido reemplaza el nav clásico por el rediseño "V3" (.lg-v3-ready). Hasta que eso ocurra, ocultamos el CENTRO del nav clásico (las pestañas/secciones desplegables) para que no se vea un instante la barra clásica con todas las secciones abiertas antes de que aparezca la V3. El logo y las acciones (buscar/campana/usuario) sí se ven, así que el nav no queda vacío. En móvil no aplica: ahí no se usa la V3 y el centro clásico ya está oculto por styles.css (se usa el hamburguesa). */ /* Invariante de arranque: la estructura clásica nunca se pinta mientras el tema Liquid Glass está activo. En escritorio la reemplaza V3; en móvil la navegación corresponde al botón/cajón compacto. Esta regla no depende de la clase temprana de , de la velocidad del JS ni del zoom aplicado. */ body.liquid-glass-preview.liquid-glass-preview .main-nav:not(.lg-v3-ready):not(.lgb-goo-ready) .nav-center { display: none !important; visibility: hidden !important; pointer-events: none !important; } body.liquid-glass-preview.liquid-glass-preview .main-nav:is(.lg-v3-ready, .lgb-goo-ready) .nav-content { gap: 14px !important; align-items: center !important; /* min-width:100%, no 0 (ver el mismo aviso más arriba en este archivo): sin esto, el logo y la zona de usuario quedan pegados en el centro de la barra en vez de fijos en cada esquina como el nav clásico. */ min-width: 100% !important; overflow: visible !important; /* .nav-content sigue siendo el GRID de styles.css, cuyo track central es minmax(min-content, max-content): un track NO flexible, que el grid resuelve a su tamaño preferido (todas las burbujas desplegadas) ANTES de repartir espacio a los 1fr. Por eso el overflow-x:auto y el min-width:0 del rail no servían de nada: lo que desbordaba era el track, no el rail — y las últimas categorías (Multisede, Migración) quedaban fuera del viewport sin forma de alcanzarlas. Con minmax(0, 1fr) el track central entra en la misma fase de reparto que los laterales y SÍ se encoge al espacio real disponible, dejando que el scroll interno del rail haga su trabajo. Es exactamente el mismo arreglo que styles.css aplica al nav clásico vía .main-nav.nav-group-open. */ grid-template-columns: minmax(0, auto) minmax(0, 1fr) minmax(0, auto) !important; } body.liquid-glass-preview.liquid-glass-preview .main-nav:is(.lg-v3-ready, .lgb-goo-ready) .brand { flex: 0 0 auto !important; } body.liquid-glass-preview.liquid-glass-preview .lg-nav-v3 { position: relative !important; flex: 1 1 auto !important; min-width: 0 !important; display: flex !important; align-items: center !important; gap: 12px !important; z-index: 20 !important; /* La columna central del grid ahora es flexible (minmax(0,1fr), ver .nav-content) para que un grupo desplegado no desborde la barra. Pero esa columna es más ancha que las pestañas, así que sin centrar acá quedaban pegadas al borde izquierdo con un hueco grande hasta la lupa. Centrando el conjunto (pestañas + lupa) se recupera la posición original, cuando la columna medía exactamente lo que su contenido. */ justify-content: center !important; } body.liquid-glass-preview.liquid-glass-preview .lg-v3-rail { position: relative !important; /* 0 1 auto (no 1 1 auto): que NO crezca a lo ancho de la columna — la cápsula se ajusta a las pestañas, como antes. El 1 de shrink sigue permitiendo que se encoja cuando un grupo desplegado no cabe, y ahí entra a jugar el overflow-x:auto de abajo (scroll interno). */ flex: 0 1 auto !important; min-width: 0 !important; height: 78px !important; display: flex !important; align-items: center !important; gap: 9px !important; padding: 8px !important; overflow-x: auto !important; overflow-y: hidden !important; scrollbar-width: none !important; overscroll-behavior-inline: contain !important; border-radius: 34px !important; background: radial-gradient(120% 92% at 12% 0%, rgba(255,255,255,.84), rgba(231,243,255,.42) 48%, transparent 78%), radial-gradient(70% 120% at 88% 16%, rgba(74,132,255,.22), transparent 68%), linear-gradient(135deg, rgba(255,255,255,.44), rgba(210,231,255,.22)) !important; border: 1px solid var(--lg-v3-stroke) !important; -webkit-backdrop-filter: blur(16px) saturate(125%) !important; backdrop-filter: blur(16px) saturate(125%) !important; box-shadow: inset 0 1.5px 0 rgba(255,255,255,.94), inset 0 -18px 32px -34px rgba(47,116,255,.48), var(--lg-v3-shadow) !important; } body.liquid-glass-preview.liquid-glass-preview .lg-v3-rail::-webkit-scrollbar { display: none !important; } body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble { position: relative !important; isolation: isolate !important; flex: 0 0 auto !important; height: 62px !important; min-width: 88px !important; max-width: 88px !important; display: flex !important; align-items: center !important; gap: 0 !important; padding: 0 !important; overflow: hidden !important; border-radius: 28px !important; border: 1px solid rgba(255,255,255,.44) !important; background: radial-gradient(120% 90% at 32% 0%, rgba(255,255,255,.78), rgba(255,255,255,.26) 56%, transparent 80%), rgba(255,255,255,.16) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.74), inset -14px -12px 28px -26px rgba(47,116,255,.42), 0 12px 24px -22px rgba(20,58,140,.38) !important; transform: translateZ(0) !important; transition: max-width var(--lg-v3-speed) cubic-bezier(.16,1,.22,1), min-width var(--lg-v3-speed) cubic-bezier(.16,1,.22,1), background 220ms ease, border-color 220ms ease, box-shadow 220ms ease, transform 300ms cubic-bezier(.16,1,.22,1) !important; } body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble::before, body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble::after { content: "" !important; position: absolute !important; inset: 0 !important; border-radius: inherit !important; pointer-events: none !important; } body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble::before { background: linear-gradient(105deg, transparent 22%, rgba(255,255,255,.58) 42%, transparent 58%), radial-gradient(54% 24% at 28% 12%, rgba(255,255,255,.78), transparent 72%) !important; opacity: .5 !important; mix-blend-mode: screen !important; } body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble::after { inset: auto 18px 5px 18px !important; height: 3px !important; background: rgba(52, 122, 255, .0) !important; box-shadow: none !important; transition: background 180ms ease, box-shadow 180ms ease !important; } body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-expanded { min-width: min(520px, 58vw) !important; max-width: min(520px, 58vw) !important; transform: translate3d(0, -2px, 0) scale(1.01, 1.035) !important; background: radial-gradient(128% 92% at 24% 0%, rgba(255,255,255,.86), rgba(255,255,255,.32) 56%, transparent 82%), radial-gradient(90% 120% at 92% 18%, var(--lg-v3-violet), transparent 66%), rgba(255,255,255,.2) !important; border-color: rgba(255,255,255,.72) !important; box-shadow: inset 0 1.5px 0 rgba(255,255,255,.96), inset 18px 0 34px -28px rgba(255,255,255,.9), inset -18px -12px 34px -28px rgba(47,116,255,.48), 0 18px 34px -24px rgba(20,58,140,.45) !important; } body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-single, body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-single.is-expanded, body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-single.is-active { min-width: 88px !important; max-width: 88px !important; } body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-single.is-expanded { transform: translateZ(0) !important; } body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-active { background: radial-gradient(118% 92% at 24% 0%, rgba(255,255,255,.62), transparent 58%), linear-gradient(180deg, rgba(90,157,255,.96), rgba(38,93,234,.96)) !important; border-color: rgba(255,255,255,.66) !important; } body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-active::after { background: rgba(255,255,255,.9) !important; box-shadow: 0 0 14px rgba(122,188,255,.72) !important; } body.liquid-glass-preview.liquid-glass-preview .lg-v3-main, body.liquid-glass-preview.liquid-glass-preview .lg-v3-child { position: relative !important; z-index: 2 !important; border: 0 !important; cursor: pointer !important; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", system-ui, sans-serif !important; -webkit-tap-highlight-color: transparent !important; } body.liquid-glass-preview.liquid-glass-preview .lg-v3-main { flex: 0 0 88px !important; width: 88px !important; height: 62px !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 3px !important; padding: 6px 8px !important; color: var(--lg-v3-text) !important; background: transparent !important; } body.liquid-glass-preview.liquid-glass-preview .lg-v3-icon, body.liquid-glass-preview.liquid-glass-preview .lg-v3-child-icon, body.liquid-glass-preview.liquid-glass-preview .lg-v3-chevron { font-family: "Material Symbols Outlined" !important; line-height: 1 !important; font-weight: normal !important; letter-spacing: normal !important; text-transform: none !important; } body.liquid-glass-preview.liquid-glass-preview .lg-v3-icon { font-size: 1.22rem !important; } body.liquid-glass-preview.liquid-glass-preview .lg-v3-label { max-width: 100% !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; font-size: .62rem !important; line-height: 1 !important; font-weight: 820 !important; letter-spacing: 0 !important; } body.liquid-glass-preview.liquid-glass-preview .lg-v3-chevron { font-size: .78rem !important; opacity: .74 !important; transform: rotate(0deg) !important; transition: transform 240ms cubic-bezier(.16,1,.22,1) !important; } body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-expanded .lg-v3-chevron { transform: rotate(90deg) !important; } body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-active .lg-v3-main, body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-active .lg-v3-icon, body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-active .lg-v3-chevron { color: #fff !important; text-shadow: 0 1px 2px rgba(6,25,76,.42) !important; } body.liquid-glass-preview.liquid-glass-preview .lg-v3-active-dot { width: 5px !important; height: 5px !important; border-radius: 999px !important; background: currentColor !important; opacity: .78 !important; } body.liquid-glass-preview.liquid-glass-preview .lg-v3-children { flex: 0 0 auto !important; display: flex !important; align-items: center !important; gap: 7px !important; max-width: 0 !important; opacity: 0 !important; pointer-events: none !important; overflow: hidden !important; transform: translate3d(-12px, 0, 0) scale(.92) !important; transform-origin: left center !important; transition: max-width var(--lg-v3-speed) cubic-bezier(.16,1,.22,1), opacity 180ms ease, transform 320ms cubic-bezier(.16,1,.22,1) !important; } body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-expanded .lg-v3-children { max-width: var(--lg-v3-expanded-width, 900px) !important; opacity: 1 !important; pointer-events: auto !important; transform: translate3d(0, 0, 0) scale(1) !important; } body.liquid-glass-preview.liquid-glass-preview .lg-v3-child { flex: 0 0 72px !important; width: 72px !important; height: 50px !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 3px !important; padding: 5px 6px !important; border-radius: 18px !important; color: var(--lg-v3-text) !important; background: radial-gradient(120% 92% at 50% -28%, rgba(255,255,255,.54), transparent 62%), rgba(255,255,255,.12) !important; border: 1px solid rgba(255,255,255,.26) !important; transform: translate3d(-8px, 0, 0) scale(.9) !important; transition: transform 330ms cubic-bezier(.16,1,.22,1), background 180ms ease, border-color 180ms ease, box-shadow 180ms ease !important; } body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-expanded .lg-v3-child { transform: translate3d(0, 0, 0) scale(1) !important; } body.liquid-glass-preview.liquid-glass-preview .lg-v3-child:hover, body.liquid-glass-preview.liquid-glass-preview .lg-v3-child.is-active { background: radial-gradient(120% 90% at 24% 0%, rgba(255,255,255,.74), transparent 58%), rgba(255,255,255,.28) !important; border-color: rgba(255,255,255,.58) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.72), 0 12px 22px -18px rgba(37,99,235,.42) !important; transform: translate3d(0, -2px, 0) scale(1.02) !important; } body.liquid-glass-preview.liquid-glass-preview .lg-v3-child-icon { font-size: 1.05rem !important; } body.liquid-glass-preview.liquid-glass-preview .lg-v3-child-label { max-width: 100% !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; font-size: .54rem !important; line-height: 1 !important; font-weight: 760 !important; letter-spacing: 0 !important; } body.liquid-glass-preview.liquid-glass-preview .lg-v3-actions { flex: 0 0 auto !important; display: flex !important; align-items: center !important; z-index: 4 !important; } body.liquid-glass-preview.liquid-glass-preview .lg-nav-v3 .inline-search-pill:not(.lg-search-open) { width: 58px !important; min-width: 58px !important; max-width: 58px !important; } [data-theme="dark"] body.liquid-glass-preview.liquid-glass-preview .lg-v3-rail, body.liquid-glass-preview.liquid-glass-preview[data-theme="dark"] .lg-v3-rail { background: radial-gradient(110% 100% at 10% 0%, rgba(255,255,255,.18), rgba(63,93,145,.22) 50%, transparent 80%), linear-gradient(135deg, rgba(19,35,68,.76), rgba(28,45,83,.54)) !important; border-color: rgba(214,232,255,.22) !important; } body.liquid-glass-preview.liquid-glass-preview[data-theme="dark"] .lg-v3-bubble, body.liquid-glass-preview.liquid-glass-preview[data-theme="dark"] .lg-v3-child { color: #d9e9ff !important; background: radial-gradient(120% 92% at 50% -28%, rgba(255,255,255,.18), transparent 62%), rgba(12,28,58,.38) !important; border-color: rgba(214,232,255,.18) !important; } /* V3.1: cadena de gotas opticas. Mantiene la navegacion original, pero cambia el material visual a burbujas conectadas tipo liquid glass. */ body.liquid-glass-preview.liquid-glass-preview .main-nav:is(.lg-v3-ready, .lgb-goo-ready) { --lg-v3-ice: rgba(238, 248, 255, .66); --lg-v3-glass: rgba(255, 255, 255, .22); --lg-v3-glass-strong: rgba(255, 255, 255, .38); --lg-v3-stroke: rgba(255, 255, 255, .72); --lg-v3-text: #0d2d66; --lg-v3-blue: #2f74ff; --lg-v3-blue-deep: #1554d6; --lg-v3-cyan: rgba(92, 210, 255, .36); --lg-v3-violet: rgba(178, 154, 255, .28); --lg-v3-speed: 360ms; min-height: 108px !important; padding: 14px 18px !important; border-radius: 46px !important; overflow: visible !important; background: radial-gradient(76% 120% at 12% 0%, rgba(255, 255, 255, .62), transparent 60%), linear-gradient(105deg, rgba(242, 249, 255, .56), rgba(184, 213, 255, .28)) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .86), 0 22px 54px -38px rgba(25, 74, 155, .46) !important; } body.liquid-glass-preview.liquid-glass-preview .main-nav:is(.lg-v3-ready, .lgb-goo-ready) .nav-content { gap: 16px !important; } body.liquid-glass-preview.liquid-glass-preview .lg-nav-v3 { align-items: center !important; gap: 10px !important; min-width: 0 !important; } body.liquid-glass-preview.liquid-glass-preview .lg-v3-rail { height: 76px !important; padding: 2px 10px !important; gap: 14px !important; overflow-x: auto !important; overflow-y: visible !important; border-radius: 999px !important; background: transparent !important; border: 0 !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; contain: layout paint !important; } body.liquid-glass-preview.liquid-glass-preview .lg-v3-rail::before { content: "" !important; position: absolute !important; left: 16px !important; right: 16px !important; top: 50% !important; height: 34px !important; transform: translateY(-50%) !important; border-radius: 999px !important; background: linear-gradient(90deg, rgba(255, 255, 255, .18), rgba(175, 219, 255, .28), rgba(255, 255, 255, .15)) !important; border: 1px solid rgba(255, 255, 255, .28) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .58), inset 0 -16px 22px -24px rgba(48, 116, 255, .36) !important; pointer-events: none !important; } body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble { height: 70px !important; min-width: 92px !important; max-width: 92px !important; padding: 0 !important; gap: 0 !important; overflow: visible !important; border-radius: 999px !important; border: 1px solid var(--lg-v3-stroke) !important; color: var(--lg-v3-text) !important; background: radial-gradient(95% 82% at 30% 10%, rgba(255, 255, 255, .95), rgba(255, 255, 255, .34) 42%, transparent 73%), radial-gradient(88% 80% at 72% 86%, var(--lg-v3-cyan), transparent 68%), linear-gradient(145deg, rgba(255, 255, 255, .34), rgba(206, 231, 255, .2)) !important; -webkit-backdrop-filter: blur(14px) saturate(125%) !important; backdrop-filter: blur(14px) saturate(125%) !important; box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .94), inset -14px -18px 28px -24px rgba(43, 115, 255, .4), inset 14px 10px 22px -24px rgba(255, 255, 255, .95), 0 18px 34px -28px rgba(20, 58, 140, .44) !important; transform: translate3d(0, 0, 0) scale(1) !important; transition: min-width var(--lg-v3-speed) cubic-bezier(.2, 1.12, .22, 1), max-width var(--lg-v3-speed) cubic-bezier(.2, 1.12, .22, 1), transform var(--lg-v3-speed) cubic-bezier(.2, 1.12, .22, 1), background 220ms ease, border-color 220ms ease, box-shadow 220ms ease !important; will-change: min-width, max-width, transform !important; } body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble:not(:last-child)::after { content: "" !important; position: absolute !important; z-index: -1 !important; right: -18px !important; top: 50% !important; width: 28px !important; height: 24px !important; transform: translateY(-50%) scaleX(.72) !important; border-radius: 999px !important; background: radial-gradient(80% 120% at 50% 0%, rgba(255, 255, 255, .52), transparent 72%), rgba(200, 230, 255, .18) !important; border-top: 1px solid rgba(255, 255, 255, .38) !important; border-bottom: 1px solid rgba(145, 190, 255, .2) !important; opacity: .84 !important; pointer-events: none !important; } body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble::before { inset: 5px 8px auto 12px !important; height: 24px !important; border-radius: 999px !important; background: linear-gradient(105deg, rgba(255, 255, 255, .86), rgba(255, 255, 255, .16) 62%, transparent), radial-gradient(60% 80% at 28% 10%, rgba(255, 255, 255, .98), transparent 70%) !important; opacity: .78 !important; } body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-hover, body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-expanded { min-width: var(--lg-v3-expanded-width, 900px) !important; max-width: var(--lg-v3-expanded-width, 900px) !important; transform: translate3d(0, -3px, 0) scale(1.012, 1.045) !important; border-color: rgba(255, 255, 255, .88) !important; background: radial-gradient(92% 82% at 28% 8%, rgba(255, 255, 255, .98), rgba(255, 255, 255, .38) 45%, transparent 76%), radial-gradient(78% 92% at 86% 72%, rgba(114, 206, 255, .36), transparent 66%), radial-gradient(72% 80% at 48% 112%, var(--lg-v3-violet), transparent 72%), rgba(255, 255, 255, .2) !important; box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 1), inset 18px 0 34px -28px rgba(255, 255, 255, .92), inset -22px -18px 36px -28px rgba(47, 116, 255, .48), 0 24px 42px -30px rgba(20, 58, 140, .52) !important; } body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-single, body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-single.is-hover, body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-single.is-expanded, body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-single.is-active { min-width: 92px !important; max-width: 92px !important; } body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-single.is-hover { transform: translate3d(0, -3px, 0) scale(1.05, 1.06) !important; } body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-active { border-color: rgba(255, 255, 255, .92) !important; background: radial-gradient(86% 76% at 28% 8%, rgba(255, 255, 255, .86), rgba(255, 255, 255, .16) 48%, transparent 74%), linear-gradient(160deg, rgba(104, 166, 255, .94), rgba(35, 96, 232, .96)) !important; box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .96), inset 0 -18px 26px -22px rgba(12, 52, 158, .54), 0 20px 38px -30px rgba(21, 84, 214, .64) !important; } body.liquid-glass-preview.liquid-glass-preview .lg-v3-main { flex: 0 0 92px !important; width: 92px !important; height: 70px !important; gap: 3px !important; padding: 8px 9px !important; border-radius: 999px !important; } body.liquid-glass-preview.liquid-glass-preview .lg-v3-main::after { content: "" !important; position: absolute !important; z-index: -1 !important; right: -18px !important; top: 50% !important; width: 34px !important; height: 30px !important; border-radius: 999px !important; transform: translateY(-50%) scaleX(.2) !important; background: rgba(221, 242, 255, .24) !important; opacity: 0 !important; transition: transform 220ms ease, opacity 160ms ease !important; } body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-expanded .lg-v3-main::after { opacity: .92 !important; transform: translateY(-50%) scaleX(1) !important; } body.liquid-glass-preview.liquid-glass-preview .lg-v3-icon { font-size: 1.32rem !important; font-variation-settings: "FILL" 0, "wght" 520, "GRAD" 0, "opsz" 24 !important; } body.liquid-glass-preview.liquid-glass-preview .lg-v3-label { font-size: .68rem !important; font-weight: 820 !important; line-height: 1.02 !important; letter-spacing: 0 !important; text-transform: uppercase !important; } body.liquid-glass-preview.liquid-glass-preview .lg-v3-chevron { font-size: .8rem !important; opacity: .68 !important; } body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-active .lg-v3-main, body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-active .lg-v3-icon, body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-active .lg-v3-chevron { color: #fff !important; text-shadow: 0 1px 3px rgba(7, 28, 78, .42) !important; } body.liquid-glass-preview.liquid-glass-preview .lg-v3-active-dot { width: 6px !important; height: 6px !important; background: currentColor !important; box-shadow: 0 0 12px rgba(255, 255, 255, .86) !important; } body.liquid-glass-preview.liquid-glass-preview .lg-v3-children { position: relative !important; height: 70px !important; gap: 10px !important; align-items: center !important; padding: 0 10px 0 6px !important; max-width: 0 !important; opacity: 0 !important; overflow: hidden !important; transform: translate3d(-20px, 0, 0) scale(.86, .94) !important; transform-origin: left center !important; transition: max-width var(--lg-v3-speed) cubic-bezier(.2, 1.08, .22, 1), opacity 160ms ease, transform var(--lg-v3-speed) cubic-bezier(.2, 1.08, .22, 1) !important; } body.liquid-glass-preview.liquid-glass-preview .lg-v3-children::before { content: "" !important; position: absolute !important; left: -8px !important; right: 4px !important; top: 50% !important; height: 30px !important; transform: translateY(-50%) !important; border-radius: 999px !important; background: radial-gradient(90% 130% at 30% 0%, rgba(255, 255, 255, .36), transparent 72%), rgba(207, 235, 255, .18) !important; pointer-events: none !important; } body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-expanded .lg-v3-children { max-width: var(--lg-v3-expanded-width, 900px) !important; opacity: 1 !important; pointer-events: auto !important; transform: translate3d(0, 0, 0) scale(1) !important; } body.liquid-glass-preview.liquid-glass-preview .lg-v3-child { flex: 0 0 72px !important; width: 72px !important; height: 58px !important; z-index: 2 !important; border-radius: 999px !important; padding: 7px 7px !important; gap: 3px !important; color: var(--lg-v3-text) !important; background: radial-gradient(82% 70% at 28% 8%, rgba(255, 255, 255, .92), rgba(255, 255, 255, .22) 48%, transparent 76%), rgba(255, 255, 255, .18) !important; border: 1px solid rgba(255, 255, 255, .58) !important; -webkit-backdrop-filter: blur(11px) saturate(120%) !important; backdrop-filter: blur(11px) saturate(120%) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .82), 0 12px 22px -20px rgba(20, 58, 140, .42) !important; transform: translate3d(-14px, 0, 0) scale(.76) !important; transition: transform 320ms cubic-bezier(.2, 1.08, .22, 1), background 180ms ease, border-color 180ms ease, box-shadow 180ms ease !important; } body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-expanded .lg-v3-child { transform: translate3d(0, 0, 0) scale(1) !important; } body.liquid-glass-preview.liquid-glass-preview .lg-v3-child:hover, body.liquid-glass-preview.liquid-glass-preview .lg-v3-child.is-active { color: #fff !important; background: radial-gradient(80% 70% at 28% 8%, rgba(255, 255, 255, .82), rgba(255, 255, 255, .16) 50%, transparent 76%), linear-gradient(160deg, rgba(92, 159, 255, .92), rgba(39, 103, 236, .94)) !important; border-color: rgba(255, 255, 255, .84) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .92), 0 16px 28px -22px rgba(37, 99, 235, .62) !important; transform: translate3d(0, -2px, 0) scale(1.035) !important; text-shadow: 0 1px 3px rgba(7, 28, 78, .38) !important; } body.liquid-glass-preview.liquid-glass-preview .lg-v3-child-icon { font-size: 1.08rem !important; font-variation-settings: "FILL" 0, "wght" 520, "GRAD" 0, "opsz" 24 !important; } body.liquid-glass-preview.liquid-glass-preview .lg-v3-child-label { font-size: .52rem !important; line-height: .98 !important; font-weight: 780 !important; letter-spacing: 0 !important; } /* Espejo de #nav-cart-badge (nav clásico): cantidad de items en el carrito sobre la burbuja "Venta". Mismo estilo visual que el original. */ body.liquid-glass-preview.liquid-glass-preview .lg-v3-child-badge { position: absolute !important; top: 2px !important; right: 2px !important; min-width: 16px !important; height: 16px !important; padding: 0 4px !important; border-radius: 999px !important; background: linear-gradient(135deg, #0ea5e9 0%, #6366f1 100%) !important; color: #fff !important; font-size: .5rem !important; font-weight: 900 !important; line-height: 16px !important; text-align: center !important; box-shadow: 0 2px 6px rgba(14, 165, 233, .55), 0 0 0 2px rgba(255, 255, 255, .9) !important; pointer-events: none !important; z-index: 3 !important; } body.liquid-glass-preview.liquid-glass-preview .lg-v3-actions { position: relative !important; flex: 0 0 auto !important; min-width: 62px !important; margin-left: 2px !important; } body.liquid-glass-preview.liquid-glass-preview .lg-nav-v3 .inline-search-pill:not(.lg-search-open) { width: 58px !important; min-width: 58px !important; max-width: 58px !important; border-radius: 999px !important; } body.liquid-glass-preview.liquid-glass-preview .lg-nav-v3 .inline-search-pill.lg-search-open { width: min(280px, 26vw) !important; max-width: min(280px, 26vw) !important; } body.liquid-glass-preview.liquid-glass-preview[data-theme="dark"] .lg-v3-rail::before, body.liquid-glass-preview.liquid-glass-preview[data-theme="dark"] .lg-v3-children::before { background: rgba(30, 56, 94, .28) !important; border-color: rgba(214, 232, 255, .18) !important; } body.liquid-glass-preview.liquid-glass-preview[data-theme="dark"] .lg-v3-bubble, body.liquid-glass-preview.liquid-glass-preview[data-theme="dark"] .lg-v3-child { color: #e3efff !important; background: radial-gradient(95% 82% at 30% 10%, rgba(255, 255, 255, .26), rgba(255, 255, 255, .08) 48%, transparent 76%), rgba(23, 44, 76, .38) !important; border-color: rgba(214, 232, 255, .28) !important; } @media (max-width: 1280px) { body.liquid-glass-preview.liquid-glass-preview .lg-v3-rail { gap: 10px !important; } body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble, body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-single, body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-single.is-active { min-width: 84px !important; max-width: 84px !important; } body.liquid-glass-preview.liquid-glass-preview .lg-v3-main { flex-basis: 84px !important; width: 84px !important; } body.liquid-glass-preview.liquid-glass-preview .lg-v3-child { flex-basis: 66px !important; width: 66px !important; } body.liquid-glass-preview.liquid-glass-preview .lg-v3-label { font-size: .62rem !important; } } @media (prefers-reduced-motion: reduce) { body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble, body.liquid-glass-preview.liquid-glass-preview .lg-v3-children, body.liquid-glass-preview.liquid-glass-preview .lg-v3-child { transition-duration: 1ms !important; } } /* V3.2: contraste y respuesta tactil para toda la barra superior. */ body.liquid-glass-preview.liquid-glass-preview .main-nav:is(.lg-v3-ready, .lgb-goo-ready) .brand-powered { min-height: 18px !important; padding: 2px 8px 2px 4px !important; border-radius: 999px !important; background: radial-gradient(120% 140% at 18% 0%, rgba(255, 255, 255, .94), transparent 68%), rgba(255, 255, 255, .34) !important; border: 1px solid rgba(255, 255, 255, .52) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .82), 0 8px 18px -16px rgba(13, 45, 102, .42) !important; -webkit-backdrop-filter: blur(9px) saturate(118%) !important; backdrop-filter: blur(9px) saturate(118%) !important; opacity: 1 !important; } body.liquid-glass-preview.liquid-glass-preview .main-nav:is(.lg-v3-ready, .lgb-goo-ready) .brand-powered span, body.liquid-glass-preview.liquid-glass-preview .main-nav:is(.lg-v3-ready, .lgb-goo-ready) .brand-powered strong { color: #133b7c !important; opacity: 1 !important; text-shadow: 0 1px 0 rgba(255, 255, 255, .84) !important; } body.liquid-glass-preview.liquid-glass-preview .main-nav:is(.lg-v3-ready, .lgb-goo-ready) .brand-powered strong { color: #0a2a68 !important; font-weight: 900 !important; } body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble::after { box-shadow: 0 0 0 1px rgba(255, 255, 255, .22), inset 0 1px 0 rgba(255, 255, 255, .52) !important; } body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-liquid-splitting::before { animation: dioLGV3BubbleGlint 440ms cubic-bezier(.2, 1, .22, 1) both !important; } body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-liquid-splitting .lg-v3-main::after { animation: dioLGV3MembraneStretch 420ms cubic-bezier(.2, 1.08, .22, 1) both !important; } body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-liquid-splitting .lg-v3-child { animation: dioLGV3DropSplit 420ms cubic-bezier(.18, 1.18, .22, 1) both !important; } body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-liquid-splitting .lg-v3-child:nth-child(2) { animation-delay: 22ms !important; } body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-liquid-splitting .lg-v3-child:nth-child(3) { animation-delay: 44ms !important; } body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-liquid-splitting .lg-v3-child:nth-child(4) { animation-delay: 66ms !important; } body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-liquid-splitting .lg-v3-child:nth-child(n+5) { animation-delay: 88ms !important; } @keyframes dioLGV3BubbleGlint { 0% { opacity: .35; transform: translate3d(-16px, 0, 0) scaleX(.82); filter: blur(.5px); } 54% { opacity: .95; transform: translate3d(8px, 0, 0) scaleX(1.08); filter: blur(0); } 100% { opacity: .78; transform: translate3d(0, 0, 0) scaleX(1); filter: blur(0); } } @keyframes dioLGV3MembraneStretch { 0% { opacity: 0; transform: translateY(-50%) scaleX(.06); filter: blur(2px); } 48% { opacity: .96; transform: translateY(-50%) scaleX(1.22); filter: blur(.4px); } 100% { opacity: .88; transform: translateY(-50%) scaleX(1); filter: blur(0); } } @keyframes dioLGV3DropSplit { 0% { opacity: 0; transform: translate3d(-28px, 0, 0) scale(.48, .88); filter: blur(6px) saturate(1.25); } 56% { opacity: 1; transform: translate3d(4px, -1px, 0) scale(1.08, .96); filter: blur(.6px) saturate(1.14); } 100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); filter: blur(0) saturate(1); } } body.liquid-glass-preview.liquid-glass-preview .lg-v3-actions, body.liquid-glass-preview.liquid-glass-preview .main-nav:is(.lg-v3-ready, .lgb-goo-ready) .nav-actions { gap: 12px !important; align-items: center !important; flex-shrink: 0 !important; } body.liquid-glass-preview.liquid-glass-preview .main-nav:is(.lg-v3-ready, .lgb-goo-ready) .nav-actions { display: flex !important; } body.liquid-glass-preview.liquid-glass-preview .main-nav:is(.lg-v3-ready, .lgb-goo-ready) .inline-search-pill, body.liquid-glass-preview.liquid-glass-preview .main-nav:is(.lg-v3-ready, .lgb-goo-ready) .global-updates-trigger, body.liquid-glass-preview.liquid-glass-preview .main-nav:is(.lg-v3-ready, .lgb-goo-ready) #nav-user-chip { position: relative !important; overflow: hidden !important; color: #123876 !important; background: radial-gradient(95% 82% at 30% 8%, rgba(255, 255, 255, .96), rgba(255, 255, 255, .34) 44%, transparent 74%), radial-gradient(90% 86% at 76% 92%, rgba(102, 198, 255, .24), transparent 68%), rgba(255, 255, 255, .24) !important; border: 1px solid rgba(255, 255, 255, .72) !important; -webkit-backdrop-filter: blur(13px) saturate(120%) !important; backdrop-filter: blur(13px) saturate(120%) !important; box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .94), inset -12px -12px 24px -22px rgba(47, 116, 255, .38), 0 16px 30px -26px rgba(13, 45, 102, .48) !important; transition: transform 260ms cubic-bezier(.2, 1.08, .22, 1), background 180ms ease, border-color 180ms ease, box-shadow 180ms ease, width 330ms cubic-bezier(.2, 1.08, .22, 1), max-width 330ms cubic-bezier(.2, 1.08, .22, 1) !important; } body.liquid-glass-preview.liquid-glass-preview .main-nav:is(.lg-v3-ready, .lgb-goo-ready) .global-updates-trigger { width: 56px !important; min-width: 56px !important; height: 56px !important; border-radius: 999px !important; margin-right: 0 !important; padding: 0 !important; } body.liquid-glass-preview.liquid-glass-preview .main-nav:is(.lg-v3-ready, .lgb-goo-ready) #nav-user-chip { min-height: 56px !important; padding: 6px 13px 6px 6px !important; border-radius: 999px !important; } body.liquid-glass-preview.liquid-glass-preview .main-nav:is(.lg-v3-ready, .lgb-goo-ready) .inline-search-pill::before, body.liquid-glass-preview.liquid-glass-preview .main-nav:is(.lg-v3-ready, .lgb-goo-ready) .global-updates-trigger::before, body.liquid-glass-preview.liquid-glass-preview .main-nav:is(.lg-v3-ready, .lgb-goo-ready) #nav-user-chip::before { content: "" !important; position: absolute !important; left: 9px !important; right: 9px !important; top: 5px !important; height: 38% !important; border-radius: inherit !important; background: linear-gradient(180deg, rgba(255, 255, 255, .78), transparent) !important; pointer-events: none !important; opacity: .8 !important; } body.liquid-glass-preview.liquid-glass-preview .main-nav:is(.lg-v3-ready, .lgb-goo-ready) .inline-search-pill:hover, body.liquid-glass-preview.liquid-glass-preview .main-nav:is(.lg-v3-ready, .lgb-goo-ready) .global-updates-trigger:hover, body.liquid-glass-preview.liquid-glass-preview .main-nav:is(.lg-v3-ready, .lgb-goo-ready) #nav-user-chip:hover, body.liquid-glass-preview.liquid-glass-preview .main-nav:is(.lg-v3-ready, .lgb-goo-ready) .inline-search-pill.lg-search-open { transform: translate3d(0, -2px, 0) scale(1.025) !important; border-color: rgba(255, 255, 255, .9) !important; box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 1), inset -16px -14px 30px -24px rgba(47, 116, 255, .44), 0 20px 36px -26px rgba(13, 45, 102, .54) !important; } body.liquid-glass-preview.liquid-glass-preview .main-nav:is(.lg-v3-ready, .lgb-goo-ready) .inline-search-icon, body.liquid-glass-preview.liquid-glass-preview .main-nav:is(.lg-v3-ready, .lgb-goo-ready) .inline-search-close, body.liquid-glass-preview.liquid-glass-preview .main-nav:is(.lg-v3-ready, .lgb-goo-ready) .global-updates-trigger .material-symbols-outlined, body.liquid-glass-preview.liquid-glass-preview .main-nav:is(.lg-v3-ready, .lgb-goo-ready) #nav-user-arrow { color: #173d80 !important; opacity: 1 !important; text-shadow: 0 1px 0 rgba(255, 255, 255, .78) !important; } body.liquid-glass-preview.liquid-glass-preview .main-nav:is(.lg-v3-ready, .lgb-goo-ready) #inline-search-input { color: #0b2a61 !important; caret-color: #246bff !important; } body.liquid-glass-preview.liquid-glass-preview .main-nav:is(.lg-v3-ready, .lgb-goo-ready) #inline-search-input::placeholder { color: rgba(13, 45, 102, .62) !important; } body.liquid-glass-preview.liquid-glass-preview .main-nav:is(.lg-v3-ready, .lgb-goo-ready) #current-user-email { color: #0f3474 !important; opacity: 1 !important; text-shadow: 0 1px 0 rgba(255, 255, 255, .72) !important; } body.liquid-glass-preview.liquid-glass-preview .main-nav:is(.lg-v3-ready, .lgb-goo-ready) #nav-user-role-badge { color: rgba(13, 45, 102, .72) !important; } body.liquid-glass-preview.liquid-glass-preview .lg-glass-press { animation: dioLGGlassPress 320ms cubic-bezier(.2, 1.08, .22, 1) both !important; } body.liquid-glass-preview.liquid-glass-preview .lg-ripple { background: radial-gradient(circle, rgba(255, 255, 255, .98) 0%, rgba(188, 226, 255, .58) 34%, rgba(78, 147, 255, .2) 54%, transparent 74%) !important; mix-blend-mode: screen !important; } @keyframes dioLGGlassPress { 0% { filter: saturate(1); } 42% { filter: saturate(1.18) brightness(1.05); } 100% { filter: saturate(1); } } body.liquid-glass-preview.liquid-glass-preview .modal-content { background: linear-gradient(155deg, rgba(255, 255, 255, .92), rgba(255, 255, 255, .8)) !important; -webkit-backdrop-filter: blur(16px) saturate(115%) !important; backdrop-filter: blur(16px) saturate(115%) !important; border: 1px solid var(--glass-stroke-lo) !important; border-radius: 24px !important; box-shadow: inset 0 1px 0 var(--glass-stroke-hi), var(--card-shadow) !important; color: var(--text-onglass) !important; } /* ---------- Buscador global (panel flotante) ---------- */ /* Todo su HTML viene con estilo en línea (js/global-search.js lo arma con style="..." directo, no clases), así que hay que pisar cada pieza con !important — igual que con los modales de SweetAlert2. */ body.liquid-glass-preview.liquid-glass-preview #global-search-floating-panel { background: linear-gradient(155deg, var(--glass-fill-strong), rgba(255, 255, 255, .78)) !important; -webkit-backdrop-filter: blur(16px) saturate(118%) !important; backdrop-filter: blur(16px) saturate(118%) !important; border: 1px solid var(--glass-stroke-lo) !important; border-radius: 24px !important; box-shadow: inset 0 1px 0 var(--glass-stroke-hi), var(--card-shadow) !important; } /* Encabezado "Buscador global" — traía su propio fondo blanco/gris en línea */ body.liquid-glass-preview.liquid-glass-preview #global-search-floating-panel > div:first-child { background: linear-gradient(180deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, .1)) !important; border-bottom: 1px solid var(--glass-stroke-lo) !important; } body.liquid-glass-preview.liquid-glass-preview #global-search-floating-panel > div:first-child > div > div:first-child { color: var(--text-onglass) !important; } body.liquid-glass-preview.liquid-glass-preview #global-search-floating-panel > div:first-child > div > div:last-child { color: var(--text-onglass-dim) !important; } body.liquid-glass-preview.liquid-glass-preview #global-search-floating-close { background: var(--glass-fill) !important; color: var(--text-onglass) !important; } body.liquid-glass-preview.liquid-glass-preview .search-category-header { color: var(--glass-brand) !important; } body.liquid-glass-preview.liquid-glass-preview .search-result-item { border-bottom-color: var(--glass-stroke-lo) !important; transition: background .15s ease !important; } body.liquid-glass-preview.liquid-glass-preview .search-result-item:hover { background: var(--glass-fill) !important; } body.liquid-glass-preview.liquid-glass-preview .search-result-item > div:last-child > div:first-child { color: var(--text-onglass) !important; } body.liquid-glass-preview.liquid-glass-preview .search-result-item > div:last-child > div:not(:first-child) { color: var(--text-onglass-dim) !important; } /* ---------- Inputs ---------- */ /* :not(#view-venta *) — Ventas quedó sin Liquid Glass (ver nota más arriba, sección "Punto de venta"); sin esto, los campos de cliente/cédula/celular/ buscador de productos igual se veían translúcidos ahí aunque el resto del panel ya no tuviera vidrio. */ body.liquid-glass-preview.liquid-glass-preview input:not([type="checkbox"]):not([type="radio"]):not(#view-venta *), body.liquid-glass-preview.liquid-glass-preview select:not(#view-venta *), body.liquid-glass-preview.liquid-glass-preview textarea:not(#view-venta *) { background: rgba(120, 140, 220, .06) !important; border: 1px solid var(--glass-stroke-lo) !important; border-radius: 12px !important; color: var(--text-onglass) !important; } /* ---------- Nueva Venta: nace desde el punto exacto del click ---------- */ body.liquid-glass-preview.liquid-glass-preview .lg-sale-bloom, body.liquid-glass-preview.liquid-glass-preview .lg-history-bloom { position: fixed !important; left: 0 !important; top: 0 !important; z-index: 2147482500 !important; pointer-events: none !important; overflow: hidden !important; transform-origin: 0 0 !important; background: radial-gradient(120% 90% at 18% 0%, rgba(255, 255, 255, .95), rgba(255, 255, 255, .28) 36%, transparent 64%), radial-gradient(90% 70% at 92% 12%, rgba(160, 190, 255, .38), transparent 58%), linear-gradient(145deg, rgba(255, 255, 255, .52), rgba(255, 255, 255, .24) 58%, rgba(255, 255, 255, .44)) !important; -webkit-backdrop-filter: blur(16px) saturate(125%) !important; backdrop-filter: blur(16px) saturate(125%) !important; border: 1px solid rgba(255, 255, 255, .72) !important; box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .98), inset 18px 0 36px -28px rgba(79, 111, 224, .55), inset -18px -12px 42px -30px rgba(139, 92, 246, .48), 0 30px 70px -34px rgba(30, 50, 120, .38) !important; will-change: transform, opacity, border-radius, filter !important; } body.liquid-glass-preview.liquid-glass-preview .lg-sale-bloom::before, body.liquid-glass-preview.liquid-glass-preview .lg-sale-bloom::after, body.liquid-glass-preview.liquid-glass-preview .lg-history-bloom::before, body.liquid-glass-preview.liquid-glass-preview .lg-history-bloom::after { content: "" !important; position: absolute !important; inset: 0 !important; border-radius: inherit !important; pointer-events: none !important; } body.liquid-glass-preview.liquid-glass-preview .lg-sale-bloom::before, body.liquid-glass-preview.liquid-glass-preview .lg-history-bloom::before { background: linear-gradient(105deg, transparent 18%, rgba(255, 255, 255, .78) 40%, transparent 58%), radial-gradient(58% 22% at 16% 14%, rgba(255, 255, 255, .92), transparent 70%) !important; opacity: .72 !important; mix-blend-mode: screen !important; } body.liquid-glass-preview.liquid-glass-preview .lg-sale-bloom::after, body.liquid-glass-preview.liquid-glass-preview .lg-history-bloom::after { inset: 8px !important; border: 1px solid rgba(255, 255, 255, .36) !important; box-shadow: inset 0 0 22px rgba(255, 255, 255, .36), inset 0 -18px 28px -24px rgba(79, 111, 224, .45) !important; } body.liquid-glass-preview.liquid-glass-preview #view-venta.lg-sale-reveal-active { animation: dioLGSaleViewReveal .72s cubic-bezier(.18, .92, .22, 1) both !important; transform-origin: var(--lg-sale-origin-x, 50%) var(--lg-sale-origin-y, 50%) !important; will-change: clip-path, opacity, filter !important; } body.liquid-glass-preview.lg-sale-preopening #view-venta:not(.lg-sale-reveal-active), body.liquid-glass-preview.lg-history-preopening #modal-dia .modal-content:not(.lg-history-reveal-active) { opacity: 0 !important; transform: translate3d(0, 0, 0) scale(1) !important; transition: none !important; } body.liquid-glass-preview.liquid-glass-preview #modal-dia.lg-history-closing { pointer-events: none !important; } body.liquid-glass-preview.liquid-glass-preview #modal-dia .modal-content:not(.lg-history-reveal-active):not(.lg-history-close-active):not(.lg-history-scroll-jelly) { transform: translate3d(0, 0, 0) scale(1) !important; transition: none !important; backface-visibility: hidden !important; } body.liquid-glass-preview.liquid-glass-preview #modal-dia .modal-content.lg-history-reveal-active { animation: dioLGHistoryModalReveal .72s cubic-bezier(.18, .92, .22, 1) both !important; transform-origin: var(--lg-history-origin-x, 50%) var(--lg-history-origin-y, 50%) !important; will-change: clip-path, opacity, filter !important; } body.liquid-glass-preview.liquid-glass-preview #modal-dia .modal-content.lg-history-close-active { animation: dioLGHistoryModalClose .5s cubic-bezier(.2, .86, .22, 1) both !important; transform-origin: var(--lg-history-origin-x, 50%) var(--lg-history-origin-y, 50%) !important; will-change: opacity, transform, border-radius !important; backface-visibility: hidden !important; contain: paint !important; } body.liquid-glass-preview.liquid-glass-preview #modal-dia .modal-content.lg-history-scroll-jelly:not(.lg-history-reveal-active):not(.lg-history-close-active) { transform: translate3d(0, var(--lg-history-scroll-y, 0px), 0) scale(var(--lg-history-scroll-scale-x, 1), var(--lg-history-scroll-scale-y, 1)) !important; transition: transform .07s cubic-bezier(.2, .9, .22, 1) !important; will-change: transform !important; backface-visibility: hidden !important; } body.liquid-glass-preview.liquid-glass-preview #modal-dia .modal-content::before { content: "" !important; position: absolute !important; inset: 0 !important; z-index: 3 !important; pointer-events: none !important; opacity: 0 !important; border-radius: inherit !important; background: radial-gradient(64% 20% at 50% var(--lg-history-scroll-glow-y, 50%), rgba(255, 255, 255, .52), transparent 70%), linear-gradient(100deg, transparent 38%, rgba(255, 255, 255, .24), transparent 60%) !important; mix-blend-mode: screen !important; transition: opacity .08s linear !important; will-change: opacity !important; } body.liquid-glass-preview.liquid-glass-preview #modal-dia .modal-content.lg-history-scroll-jelly::before { opacity: var(--lg-history-scroll-glow-opacity, .22) !important; } body.liquid-glass-preview.liquid-glass-preview .lg-history-bloom-close { z-index: 2147482600 !important; background: radial-gradient(115% 85% at 18% 2%, rgba(255, 255, 255, .98), rgba(255, 255, 255, .36) 34%, transparent 66%), radial-gradient(80% 58% at 88% 14%, rgba(170, 205, 255, .48), transparent 62%), radial-gradient(70% 48% at 45% 88%, rgba(139, 92, 246, .24), transparent 68%), linear-gradient(145deg, rgba(255, 255, 255, .6), rgba(255, 255, 255, .22) 56%, rgba(255, 255, 255, .5)) !important; border-color: rgba(255, 255, 255, .86) !important; box-shadow: inset 0 2px 0 rgba(255, 255, 255, 1), inset 22px 0 42px -30px rgba(79, 111, 224, .62), inset -20px -14px 46px -30px rgba(139, 92, 246, .58), 0 34px 76px -34px rgba(30, 50, 120, .42) !important; } body.liquid-glass-preview.liquid-glass-preview .lg-history-bloom-close::before { opacity: .95 !important; background: linear-gradient(105deg, transparent 16%, rgba(255, 255, 255, .92) 39%, rgba(255, 255, 255, .24) 47%, transparent 62%), radial-gradient(48% 18% at 18% 12%, rgba(255, 255, 255, .96), transparent 70%) !important; } body.liquid-glass-preview.liquid-glass-preview .lg-popover-bloom-close { box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .96), inset 14px 0 28px -22px rgba(79, 111, 224, .56), inset -14px -10px 34px -24px rgba(139, 92, 246, .44), 0 18px 42px -24px rgba(30, 50, 120, .34) !important; } body.liquid-glass-preview.liquid-glass-preview .lg-history-origin-spark { position: fixed !important; width: 52px !important; height: 52px !important; z-index: 2147482700 !important; pointer-events: none !important; border-radius: 999px !important; transform: translate(-50%, -50%) scale(.45); background: radial-gradient(circle at 35% 24%, rgba(255, 255, 255, 1), rgba(255, 255, 255, .38) 36%, transparent 68%), radial-gradient(circle at 70% 72%, rgba(120, 160, 255, .42), transparent 58%), rgba(255, 255, 255, .38) !important; -webkit-backdrop-filter: blur(11px) saturate(125%) !important; backdrop-filter: blur(11px) saturate(125%) !important; border: 1px solid rgba(255, 255, 255, .82) !important; box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 1), 0 12px 26px -14px rgba(30, 50, 120, .46) !important; } @keyframes dioLGSaleViewReveal { 0% { opacity: 0; clip-path: circle(24px at var(--lg-sale-origin-x, 50%) var(--lg-sale-origin-y, 50%)); filter: blur(8px) saturate(112%); } 58% { opacity: .92; clip-path: circle(72% at var(--lg-sale-origin-x, 50%) var(--lg-sale-origin-y, 50%)); filter: blur(3px) saturate(145%); } 100% { opacity: 1; clip-path: circle(155% at var(--lg-sale-origin-x, 50%) var(--lg-sale-origin-y, 50%)); filter: blur(0) saturate(100%); } } @keyframes dioLGHistoryModalReveal { 0% { opacity: 0; clip-path: circle(26px at var(--lg-history-origin-x, 50%) var(--lg-history-origin-y, 50%)); filter: blur(9px) saturate(155%); } 56% { opacity: .96; clip-path: circle(78% at var(--lg-history-origin-x, 50%) var(--lg-history-origin-y, 50%)); filter: blur(3px) saturate(112%); } 100% { opacity: 1; clip-path: circle(155% at var(--lg-history-origin-x, 50%) var(--lg-history-origin-y, 50%)); filter: blur(0) saturate(100%); } } @keyframes dioLGPopoverReveal { 0% { opacity: 0; clip-path: circle(18px at var(--lg-popover-origin-x, 50%) var(--lg-popover-origin-y, 50%)); filter: blur(9px) saturate(165%); } 58% { opacity: .96; clip-path: circle(82% at var(--lg-popover-origin-x, 50%) var(--lg-popover-origin-y, 50%)); filter: blur(1.5px) saturate(112%); } 100% { opacity: 1; clip-path: circle(155% at var(--lg-popover-origin-x, 50%) var(--lg-popover-origin-y, 50%)); filter: blur(0) saturate(100%); } } @keyframes dioLGHistoryModalClose { 0% { opacity: 1; border-radius: 24px; transform: translate3d(0, 0, 0) scale(1); } 34% { opacity: .92; border-radius: 30px; transform: translate3d(0, 0, 0) scale(.9); } 70% { opacity: .52; border-radius: 58px; transform: translate3d(var(--lg-history-close-mid-x, 0px), var(--lg-history-close-mid-y, 0px), 0) scale(.42); } 100% { opacity: 0; border-radius: 999px; transform: translate3d(var(--lg-history-close-x, 0px), var(--lg-history-close-y, 0px), 0) scale(.08); } } @media (prefers-reduced-motion: reduce) { body.liquid-glass-preview.liquid-glass-preview .lg-sale-bloom, body.liquid-glass-preview.liquid-glass-preview .lg-history-bloom { display: none !important; } body.liquid-glass-preview.liquid-glass-preview #view-venta.lg-sale-reveal-active, body.liquid-glass-preview.liquid-glass-preview #modal-dia .modal-content.lg-history-reveal-active, body.liquid-glass-preview.liquid-glass-preview #modal-dia .modal-content.lg-history-close-active, body.liquid-glass-preview.liquid-glass-preview #modal-dia .modal-content.lg-history-scroll-jelly { animation: none !important; clip-path: none !important; filter: none !important; transform: none !important; } } /* ============================================================ V4 "APPLE LIQUID GLASS" — ASPECTO DEL NAV DE BURBUJAS ------------------------------------------------------------ Capa de aspecto al final del archivo: se apoya en la estructura V3 (mismos elementos, misma logica de js/liquid-glass-preview.js) y solo redefine como se ve. Al ir ultima gana el cascade sin editar reglas dispersas, y se quita entera para volver atras. TRES cosas que resuelve: 1) VIDRIO SOBRE VIDRIO. Al desplegarse se apilaban el fondo de la ficha + el del grupo de hijos + su membrana + la capsula del rail. Aca la ficha desplegada NO pinta fondo: pasa a ser solo contenedor, y el vidrio lo ponen una vez el boton padre y una vez la capsula de hijos. 2) ARRANCA EN BLANCO. Los hijos entraban con una animacion de 420ms que empieza en opacity:0 (mas hasta 88ms de retraso escalonado): el desplegable se veia vacio medio segundo. Se elimina; el reveal lo hace la transicion de ancho, que ya es suave. 3) VIDRIO DE VERDAD. Ojo al tocar los fondos: el efecto depende de que sean TRANSLUCIDOS (alpha bajo) sobre backdrop-filter. Subir el alpha cerca de 1 los vuelve blanco plano y se pierde el efecto por completo, aunque el resto siga igual. ============================================================ */ /* Tono base del vidrio. Alpha deliberadamente bajo: es lo que deja ver el fondo a traves y hace que el blur se note. */ body.liquid-glass-preview.liquid-glass-preview .lg-nav-v3 { --v4-glass-top: rgba(255, 255, 255, .58); --v4-glass-bot: rgba(255, 255, 255, .22); --v4-edge: rgba(255, 255, 255, .72); --v4-gloss: rgba(255, 255, 255, .95); --v4-depth: rgba(38, 86, 170, .22); } /* ---- Capsula contenedora de todas las fichas ---- */ body.liquid-glass-preview.liquid-glass-preview .lg-v3-rail { border-radius: 30px !important; background: linear-gradient(180deg, rgba(255, 255, 255, .42), rgba(255, 255, 255, .16)) !important; border: 1px solid rgba(255, 255, 255, .6) !important; -webkit-backdrop-filter: blur(26px) saturate(180%) !important; backdrop-filter: blur(26px) saturate(180%) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), inset 0 -14px 26px -22px var(--v4-depth), 0 14px 34px -26px rgba(23, 58, 122, .34) !important; } /* ---- Ficha de categoria (cerrada) ---- Vidrio translucido + brillo especular arriba + sombra interna abajo: eso es lo que da el volumen de "burbuja". */ body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble { border-radius: 22px !important; background: linear-gradient(180deg, var(--v4-glass-top), var(--v4-glass-bot)) !important; border: 1px solid var(--v4-edge) !important; -webkit-backdrop-filter: blur(16px) saturate(170%) !important; backdrop-filter: blur(16px) saturate(170%) !important; box-shadow: inset 0 1.5px 0 var(--v4-gloss), inset 0 -10px 18px -14px var(--v4-depth), 0 8px 20px -18px rgba(23, 58, 122, .38) !important; color: var(--lg-v3-text) !important; } /* Reflejo superior: es parte del vidrio de la ficha, no una capa suelta. Solo mientras la ficha esta cerrada (ver mas abajo). */ body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble::before { inset: 3px 6px auto 6px !important; height: 40% !important; border-radius: 18px 18px 40% 40% !important; background: linear-gradient(180deg, rgba(255, 255, 255, .85), rgba(255, 255, 255, 0)) !important; opacity: .9 !important; pointer-events: none !important; } /* El conector decorativo entre fichas sumaba una capa mas. */ body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble:not(:last-child)::after { display: none !important; } body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-hover { background: linear-gradient(180deg, rgba(255, 255, 255, .72), rgba(255, 255, 255, .34)) !important; border-color: rgba(255, 255, 255, .88) !important; transform: translate3d(0, -1px, 0) !important; box-shadow: inset 0 1.5px 0 #fff, inset 0 -10px 18px -14px var(--v4-depth), 0 14px 28px -20px rgba(23, 58, 122, .42) !important; } /* ---- Activa: halo azul, texto oscuro, sin relleno solido ---- */ body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-active { background: radial-gradient(120% 100% at 50% 100%, rgba(126, 180, 255, .5), transparent 66%), linear-gradient(180deg, rgba(255, 255, 255, .72), rgba(226, 240, 255, .4)) !important; border-color: rgba(255, 255, 255, .9) !important; box-shadow: inset 0 1.5px 0 #fff, inset 0 -12px 20px -14px rgba(60, 120, 220, .3), 0 0 0 1px rgba(150, 194, 255, .45), 0 14px 30px -18px rgba(70, 138, 250, .6) !important; } body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-active .lg-v3-main, body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-active .lg-v3-icon, body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-active .lg-v3-label, body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-active .lg-v3-chevron { color: var(--lg-v3-text) !important; text-shadow: none !important; } /* Indicador de ficha activa: punto redondo bajo la etiqueta. */ body.liquid-glass-preview.liquid-glass-preview .lg-v3-active-dot { width: 7px !important; height: 7px !important; border-radius: 999px !important; background: linear-gradient(180deg, #6f9dff, #2f6ff0) !important; box-shadow: 0 0 10px rgba(72, 140, 250, .85) !important; } /* Etiquetas en su capitalizacion natural ("Inicio", "Ventas"), no en VERSALITAS: el uppercase forzado engorda la palabra y era parte de que "VENTAS" no entrara en la ficha. */ body.liquid-glass-preview.liquid-glass-preview .lg-v3-label { text-transform: none !important; letter-spacing: .01em !important; font-size: .66rem !important; font-weight: 700 !important; } /* ---- DESPLEGADA ---- La ficha deja de pintarse y pasa a ser contenedor de "boton padre + capsula de hijos". */ body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-expanded, body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-active.is-expanded { background: none !important; border-color: transparent !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; transform: none !important; overflow: visible !important; } /* Su reflejo quedaria flotando suelto: ya no hay ficha que reflejar. */ body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-expanded::before { display: none !important; } /* El boton padre toma el aspecto de ficha propia. NO se le tocan ancho ni alto a proposito: los hereda de la regla base (92x70). Forzarlos mas chicos recortaba la etiqueta ("VENTAS" salia cortado por la mitad). */ body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-expanded .lg-v3-main { position: relative !important; border-radius: 20px !important; background: linear-gradient(180deg, var(--v4-glass-top), var(--v4-glass-bot)) !important; border: 1px solid var(--v4-edge) !important; -webkit-backdrop-filter: blur(16px) saturate(170%) !important; backdrop-filter: blur(16px) saturate(170%) !important; box-shadow: inset 0 1.5px 0 var(--v4-gloss), inset 0 -10px 18px -14px var(--v4-depth), 0 8px 20px -18px rgba(23, 58, 122, .4) !important; overflow: visible !important; z-index: 2 !important; } /* El "cuello" que une el boton padre con la capsula de hijos. Va en ::after del padre y no en ::before de los hijos porque ese contenedor recorta (overflow:hidden) para animar el ancho, y ahi el cuello quedaria cortado. */ body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-expanded .lg-v3-main::after { content: "" !important; position: absolute !important; left: 100% !important; /* right:auto es obligatorio: la regla original de .lg-v3-main::after (la membrana vieja) ancla con right:-18px. Sin anular eso, el pseudo-elemento queda anclado por IZQUIERDA y DERECHA a la vez y se estira en lugar de medir los 14px del cuello. */ right: auto !important; top: 50% !important; width: 14px !important; height: 26px !important; transform: translateY(-50%) !important; border-radius: 0 !important; background: linear-gradient(180deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, .2)) !important; -webkit-backdrop-filter: blur(14px) saturate(160%) !important; backdrop-filter: blur(14px) saturate(160%) !important; border-top: 1px solid var(--v4-edge) !important; border-bottom: 1px solid var(--v4-edge) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7) !important; animation: none !important; opacity: 1 !important; z-index: 1 !important; } /* ---- Capsula de sub-fichas ---- */ body.liquid-glass-preview.liquid-glass-preview .lg-v3-children { height: 70px !important; margin-left: 12px !important; padding: 7px 9px !important; gap: 8px !important; border-radius: 24px !important; transform: none !important; } body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-expanded .lg-v3-children { background: linear-gradient(180deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, .2)) !important; border: 1px solid var(--v4-edge) !important; -webkit-backdrop-filter: blur(18px) saturate(170%) !important; backdrop-filter: blur(18px) saturate(170%) !important; box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .85), inset 0 -12px 22px -18px var(--v4-depth), 0 10px 26px -20px rgba(23, 58, 122, .38) !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; } /* La membrana interna era otra capa encima de la capsula. */ body.liquid-glass-preview.liquid-glass-preview .lg-v3-children::before { display: none !important; } /* ---- Sub-fichas ---- animation:none es el arreglo del "arranca en blanco". */ body.liquid-glass-preview.liquid-glass-preview .lg-v3-child { height: 54px !important; border-radius: 16px !important; background: linear-gradient(180deg, rgba(255, 255, 255, .74), rgba(255, 255, 255, .4)) !important; border: 1px solid rgba(255, 255, 255, .8) !important; color: var(--lg-v3-text) !important; -webkit-backdrop-filter: blur(12px) saturate(160%) !important; backdrop-filter: blur(12px) saturate(160%) !important; box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .95), inset 0 -8px 14px -12px var(--v4-depth), 0 6px 16px -14px rgba(23, 58, 122, .36) !important; animation: none !important; opacity: 1 !important; visibility: visible !important; transform: none !important; } body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-expanded .lg-v3-child { animation: none !important; opacity: 1 !important; transform: none !important; } body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-expanded .lg-v3-child:hover { background: linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(255, 255, 255, .58)) !important; border-color: #fff !important; color: var(--lg-v3-text) !important; text-shadow: none !important; transform: translate3d(0, -2px, 0) !important; box-shadow: inset 0 1.5px 0 #fff, inset 0 -8px 14px -12px var(--v4-depth), 0 12px 22px -16px rgba(23, 58, 122, .44) !important; } /* Sub-ficha activa: mismo halo azul que la ficha padre activa. */ body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-expanded .lg-v3-child.is-active { background: radial-gradient(120% 100% at 50% 100%, rgba(126, 180, 255, .55), transparent 68%), linear-gradient(180deg, rgba(255, 255, 255, .8), rgba(226, 240, 255, .5)) !important; border-color: rgba(255, 255, 255, .92) !important; color: #0b3178 !important; text-shadow: none !important; box-shadow: inset 0 1.5px 0 #fff, 0 0 0 1px rgba(150, 194, 255, .45), 0 12px 26px -16px rgba(70, 138, 250, .58) !important; } /* Etiquetas de 2 lineas ("Historial Ventas", "Facturacion Electronica"). El ancho de la sub-ficha NO cambia: ese ancho alimenta el calculo del desplegable en el JS. */ body.liquid-glass-preview.liquid-glass-preview .lg-v3-child-label { white-space: normal !important; overflow-wrap: anywhere !important; overflow: visible !important; text-overflow: clip !important; font-size: .5rem !important; line-height: 1.08 !important; text-align: center !important; } /* La etiqueta de la ficha padre tampoco debe recortarse. */ body.liquid-glass-preview.liquid-glass-preview .lg-v3-label { overflow: visible !important; text-overflow: clip !important; line-height: 1.05 !important; } /* Aviso de carrito: rojo, como en el diseno. */ body.liquid-glass-preview.liquid-glass-preview .lg-v3-child-badge { background: linear-gradient(180deg, #ff5f5f, #e8352f) !important; box-shadow: 0 2px 8px rgba(232, 53, 47, .5), 0 0 0 2px #fff !important; } /* El chevron acompana: cerrada apunta a la derecha, abierta abajo. */ body.liquid-glass-preview.liquid-glass-preview .lg-v3-chevron { transition: transform 260ms cubic-bezier(.2, 1, .22, 1) !important; } body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-expanded .lg-v3-chevron { transform: rotate(90deg) !important; } /* ---- BUG DEL ARRANQUE DEL DESPLIEGUE ---- La regla original ensancha la ficha con .is-hover O .is-expanded: .lg-v3-bubble.is-hover, .lg-v3-bubble.is-expanded { min/max-width: var(--lg-v3-expanded-width) } Eso funcionaba cuando el hover abria al instante (las dos clases se ponian juntas). Al sumar el hover-intent de 420ms, el JS pone .is-hover al entrar el mouse y .is-expanded recien 420ms despues -> durante esos 420ms la ficha ya esta ANCHA pero los hijos siguen colapsados (su max-width depende de .is-expanded): se veia una capsula estirada y vacia antes de que apareciera el contenido. Aca el ensanchado queda atado SOLO a .is-expanded: mientras haya hover pero todavia no despliegue, la ficha mantiene su ancho normal y el realce es solo de color/elevacion. */ body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-hover:not(.is-expanded) { min-width: 92px !important; max-width: 92px !important; } /* El mismo desfase aplicaba al salto de escala: la ficha "pegaba" el estiron al entrar el mouse, antes de tener nada que mostrar. */ body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-hover:not(.is-expanded) { transform: translate3d(0, -1px, 0) !important; } /* ============================================================ V4.1 — AFINADO HACIA EL MOCKUP "ETEREO" ------------------------------------------------------------ Comparando la version anterior contra la referencia, lo que sobraba era CONTRASTE, no estructura. Cuatro ajustes: 1) Bordes casi invisibles (antes marcaban cada ficha con una linea blanca dura, y el conjunto se leia como cajas). 2) Vidrio mas lechoso y menos azul. 3) Iconos de trazo fino (eje "wght" de Material Symbols): la referencia usa ~300 y nosotros teniamos 520, que a este tamano se ve macizo. 4) Mas aire entre fichas y esquinas mas redondeadas. El acento pasa a VIOLETA como en la referencia. Si hay que volver al azul de Dioptrisoft, se cambian solo --v4-accent y --v4-accent-2 de aca abajo: todo lo demas los usa. ============================================================ */ body.liquid-glass-preview.liquid-glass-preview .lg-nav-v3 { --v4-accent: #7c5cff; --v4-accent-2: #a78bfa; /* Vidrio mas lechoso: menos alpha y sin tinte azul. */ --v4-glass-top: rgba(255, 255, 255, .5); --v4-glass-bot: rgba(255, 255, 255, .16); --v4-edge: rgba(255, 255, 255, .5); --v4-gloss: rgba(255, 255, 255, .82); --v4-depth: rgba(118, 120, 175, .14); } /* ---- Rail: mas aire entre fichas, borde apenas insinuado ---- */ body.liquid-glass-preview.liquid-glass-preview .lg-v3-rail { gap: 13px !important; padding: 10px 12px !important; background: linear-gradient(180deg, rgba(255, 255, 255, .3), rgba(255, 255, 255, .1)) !important; border: 1px solid rgba(255, 255, 255, .46) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .66), 0 16px 40px -30px rgba(60, 70, 120, .3) !important; } /* ---- Fichas: mas redondeadas y sin linea dura ---- */ body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble { border-radius: 26px !important; border: 1px solid rgba(255, 255, 255, .46) !important; box-shadow: inset 0 1px 0 var(--v4-gloss), inset 0 -12px 20px -16px var(--v4-depth), 0 10px 26px -20px rgba(60, 70, 120, .28) !important; } /* El reflejo tambien mas tenue: antes era una banda blanca nitida. */ body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble::before { background: linear-gradient(180deg, rgba(255, 255, 255, .6), rgba(255, 255, 255, 0)) !important; opacity: .7 !important; } body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-hover { background: linear-gradient(180deg, rgba(255, 255, 255, .66), rgba(255, 255, 255, .28)) !important; border-color: rgba(255, 255, 255, .7) !important; box-shadow: inset 0 1px 0 #fff, inset 0 -12px 20px -16px var(--v4-depth), 0 16px 32px -22px rgba(60, 70, 120, .34) !important; } /* ---- Iconos de trazo fino ---- Es el cambio que mas acerca al mockup: el eje "wght" de Material Symbols. 520 se ve macizo a este tamano; la referencia usa ~300. */ body.liquid-glass-preview.liquid-glass-preview .lg-v3-icon, body.liquid-glass-preview.liquid-glass-preview .lg-v3-child-icon { font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 24 !important; color: var(--lg-v3-text) !important; } /* Etiquetas mas livianas y algo mas chicas. */ body.liquid-glass-preview.liquid-glass-preview .lg-v3-label { font-weight: 600 !important; font-size: .63rem !important; letter-spacing: .015em !important; } /* Chevron: en la referencia es un gris muy tenue, casi un susurro. */ body.liquid-glass-preview.liquid-glass-preview .lg-v3-chevron { opacity: .38 !important; font-size: .72rem !important; font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 24 !important; } /* ---- Activa: sutil ---- La referencia NO usa halo fuerte: la ficha activa es apenas mas blanca que el resto y lo que la marca es el icono y el punto en color de acento. */ body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-active { background: linear-gradient(180deg, rgba(255, 255, 255, .82), rgba(255, 255, 255, .5)) !important; border-color: rgba(255, 255, 255, .8) !important; box-shadow: inset 0 1px 0 #fff, inset 0 -12px 20px -16px var(--v4-depth), 0 12px 30px -20px rgba(124, 92, 255, .34) !important; } body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-active .lg-v3-icon { color: var(--v4-accent) !important; } body.liquid-glass-preview.liquid-glass-preview .lg-v3-active-dot { background: var(--v4-accent) !important; box-shadow: 0 0 10px rgba(124, 92, 255, .7) !important; } /* ---- Sub-fichas: mismo afinado ---- */ body.liquid-glass-preview.liquid-glass-preview .lg-v3-child { border-radius: 20px !important; border: 1px solid rgba(255, 255, 255, .5) !important; background: linear-gradient(180deg, rgba(255, 255, 255, .62), rgba(255, 255, 255, .3)) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), inset 0 -8px 14px -12px var(--v4-depth), 0 8px 20px -16px rgba(60, 70, 120, .28) !important; } body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-expanded .lg-v3-children { border: 1px solid rgba(255, 255, 255, .46) !important; background: linear-gradient(180deg, rgba(255, 255, 255, .38), rgba(255, 255, 255, .14)) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), inset 0 -12px 22px -18px var(--v4-depth), 0 12px 30px -24px rgba(60, 70, 120, .3) !important; } body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-expanded .lg-v3-main { border: 1px solid rgba(255, 255, 255, .5) !important; box-shadow: inset 0 1px 0 var(--v4-gloss), inset 0 -12px 20px -16px var(--v4-depth), 0 10px 24px -20px rgba(60, 70, 120, .3) !important; } /* Sub-ficha activa: acento violeta, tambien sutil. */ body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-expanded .lg-v3-child.is-active { background: linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .6)) !important; border-color: rgba(255, 255, 255, .84) !important; color: var(--lg-v3-text) !important; box-shadow: inset 0 1px 0 #fff, 0 12px 28px -18px rgba(124, 92, 255, .42) !important; } body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-expanded .lg-v3-child.is-active .lg-v3-child-icon { color: var(--v4-accent) !important; } /* El cuello, acompanando el borde tenue del resto. */ body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-expanded .lg-v3-main::after { border-top-color: rgba(255, 255, 255, .5) !important; border-bottom-color: rgba(255, 255, 255, .5) !important; background: linear-gradient(180deg, rgba(255, 255, 255, .38), rgba(255, 255, 255, .14)) !important; } /* ---- LA "LINEA GRIS" Y EL FONDO RARO DETRAS DE LAS FICHAS ---- Dos cosas de la barra contenedora, no de las fichas: 1) .main-nav trae una sombra INTERNA inferior azulada (inset 0 -20px 34px -34px rgba(37,99,235,.46)). Con el vidrio opaco de antes no se notaba; al volver las fichas translucidas quedo visible por detras como una banda gris cruzando la barra. 2) .main-nav::after es un destello que barre la barra en diagonal cada 8s. Es una capa extra que la referencia no tiene y que, congelada en una captura, se lee como una franja rara. Se corrigen SOLO con .lg-v3-ready, o sea unicamente en el nav de burbujas: los otros estilos de nav siguen como estaban. */ body.liquid-glass-preview.liquid-glass-preview .main-nav.lg-v3-ready { background: radial-gradient(120% 160% at 12% 0%, rgba(255, 255, 255, .72), rgba(255, 255, 255, .3) 46%, transparent 76%), linear-gradient(160deg, rgba(255, 255, 255, .5), rgba(246, 245, 255, .34)) !important; border: 1px solid rgba(255, 255, 255, .6) !important; /* Sin la inset inferior azul: esa era la banda gris. */ box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .8), 0 20px 50px -34px rgba(90, 90, 150, .3) !important; } body.liquid-glass-preview.liquid-glass-preview .main-nav.lg-v3-ready::after { display: none !important; animation: none !important; } /* ---- BLOQUES FANTASMA EN LOS HUECOS ENTRE FICHAS ---- Restos del efecto "gooey" anterior. Cada ficha arrastraba dos pseudo-elementos posicionados FUERA de si misma (right:-18px, z-index:-1), pensados para dibujar la membrana que unia burbujas: .lg-v3-bubble:not(:last-child)::after (28x24, opacity .84) .lg-v3-main::after (34x30) Caian justo en el hueco entre fichas y, con el vidrio translucido nuevo, se leen como rectangulos grises por detras. Se ocultan TODOS; el unico que sobrevive es el cuello de la ficha desplegada (.is-expanded .lg-v3-main::after), que se redefine mas arriba. */ body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble::after, body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble:not(:last-child)::after, body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble:not(.is-expanded) .lg-v3-main::after, body.liquid-glass-preview.liquid-glass-preview .lg-v3-children::after { content: none !important; display: none !important; opacity: 0 !important; } /* La capsula de hijos, cerrada, conserva padding y margen: eran ~30px de caja vacia asomando a la derecha de CADA ficha. Con max-width:0 no se ve, pero ocupa lugar y ensancha el hueco entre fichas. */ body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble:not(.is-expanded) .lg-v3-children { padding: 0 !important; margin-left: 0 !important; border-width: 0 !important; } /* ---- EL "RIEL" AZULADO DETRAS DE LAS FICHAS ---- .lg-v3-rail::before es una barra horizontal de 34px de alto que cruza toda la barra (left:16px / right:16px) con degradado azul (rgba(175,219,255,.28)) y borde propio. Era la via sobre la que "corrian" las burbujas en el diseno gooey anterior. Con el vidrio opaco de antes quedaba tapada; al volver las fichas translucidas asoma por detras como una banda azul-gris con cantos rectos. Es la ultima capa heredada de aquel efecto: la referencia no tiene ninguna via, las fichas flotan sobre la barra. */ body.liquid-glass-preview.liquid-glass-preview .lg-v3-rail::before { content: none !important; display: none !important; } /* ============================================================ V4.2 — EFECTO BURBUJA (VOLUMEN) ------------------------------------------------------------ La pasada anterior quedo PLANA y demasiado blanca: para sacar las capas fantasma baje tanto la opacidad y los bordes que las fichas perdieron relieve y se fundieron con la barra. El efecto "burbuja" NO se logra con mas transparencia sino con VOLUMEN, y son cuatro capas de sombra trabajando juntas dentro de un mismo box-shadow (por eso conviene no tocarlas sueltas): 1. inset arriba -> brillo especular, el reflejo de la luz. 2. inset abajo -> sombra interna, hunde la base y da panza. 3. drop cercana -> despega la ficha de la barra. 4. drop difusa -> la asienta y le da peso. Ademas el fondo va de blanco arriba a gris-azulado abajo: sin ese degradado la ficha se lee como un rectangulo plano por mas sombras que tenga. El acento vuelve a AZUL (la referencia nueva usa azul, no el violeta del mockup anterior). ============================================================ */ body.liquid-glass-preview.liquid-glass-preview .lg-nav-v3 { /* Antes fijo en azul Dioptrisoft (#2f6ff0/#6aa4ff) sin importar el tema clínico elegido en Configuración (js/theme.js pinta --primary/--secondary/ --accent en :root). Todo lo demás del nav de burbujas ya lee estas dos variables (ver comentario de la sección V4.1 más arriba), así que basta con derivarlas del tema activo para que el nav completo se recoloree. */ --v4-accent: var(--primary, #2f6ff0); --v4-accent-2: var(--secondary, #6aa4ff); --v4-shade: rgba(120, 140, 180, .38); } /* ---- Barra contenedora: gris perla, no blanco puro ---- */ body.liquid-glass-preview.liquid-glass-preview .main-nav.lg-v3-ready { background: radial-gradient(120% 180% at 12% 0%, rgba(255, 255, 255, .96), rgba(255, 255, 255, .6) 44%, transparent 78%), linear-gradient(180deg, rgba(250, 251, 254, .92), rgba(232, 237, 246, .86)) !important; border: 1px solid rgba(255, 255, 255, .95) !important; box-shadow: inset 0 2px 0 #fff, inset 0 -16px 30px -22px rgba(120, 140, 180, .4), 0 18px 44px -28px rgba(90, 110, 150, .4) !important; } body.liquid-glass-preview.liquid-glass-preview .lg-v3-rail { background: transparent !important; border: 0 !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } /* ---- LA FICHA BURBUJA ---- */ body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble { border-radius: 22px !important; background: linear-gradient(180deg, rgba(255, 255, 255, .98) 0%, rgba(255, 255, 255, .82) 42%, rgba(231, 237, 247, .74) 100%) !important; border: 1px solid rgba(255, 255, 255, .95) !important; -webkit-backdrop-filter: blur(10px) saturate(140%) !important; backdrop-filter: blur(10px) saturate(140%) !important; box-shadow: inset 0 2px 1px rgba(255, 255, 255, 1), inset 0 -7px 12px -6px var(--v4-shade), inset -2px 0 7px -5px rgba(150, 170, 205, .4), 0 5px 12px -5px rgba(95, 115, 155, .34), 0 14px 30px -14px rgba(95, 115, 155, .3) !important; color: var(--lg-v3-text) !important; } /* Reflejo superior: nitido otra vez. Aplanado quedaba invisible. */ body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble::before { inset: 3px 7px auto 7px !important; height: 42% !important; border-radius: 18px 18px 50% 50% !important; background: linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(255, 255, 255, .12)) !important; opacity: .95 !important; pointer-events: none !important; } body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-hover { background: linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, .92) 42%, rgba(236, 242, 251, .82) 100%) !important; border-color: #fff !important; transform: translate3d(0, -2px, 0) !important; box-shadow: inset 0 2px 1px #fff, inset 0 -7px 12px -6px var(--v4-shade), 0 9px 18px -6px rgba(95, 115, 155, .38), 0 20px 38px -16px rgba(95, 115, 155, .34) !important; } /* ---- Activa: burbuja iluminada con halo azul ---- */ body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-active { background: linear-gradient(180deg, #fff 0%, rgba(247, 251, 255, .96) 45%, rgba(226, 239, 255, .92) 100%) !important; border-color: #fff !important; box-shadow: inset 0 2px 1px #fff, inset 0 -8px 14px -6px color-mix(in srgb, var(--v4-accent) 34%, transparent), 0 0 0 1px color-mix(in srgb, var(--v4-accent-2) 55%, transparent), 0 8px 20px -6px color-mix(in srgb, var(--v4-accent) 45%, transparent), 0 18px 40px -14px color-mix(in srgb, var(--v4-accent) 40%, transparent) !important; } body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-active .lg-v3-icon, body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-active .lg-v3-label { color: var(--v4-accent) !important; } body.liquid-glass-preview.liquid-glass-preview .lg-v3-active-dot { width: 18px !important; height: 4px !important; border-radius: 999px !important; background: linear-gradient(90deg, var(--v4-accent-2), var(--v4-accent)) !important; box-shadow: 0 0 12px color-mix(in srgb, var(--v4-accent) 85%, transparent) !important; } /* ---- Tipografia como la referencia: VERSALITAS ---- */ body.liquid-glass-preview.liquid-glass-preview .lg-v3-label { text-transform: uppercase !important; font-weight: 800 !important; font-size: .6rem !important; letter-spacing: .04em !important; } /* Iconos con algo mas de cuerpo que el trazo fino anterior. */ body.liquid-glass-preview.liquid-glass-preview .lg-v3-icon, body.liquid-glass-preview.liquid-glass-preview .lg-v3-child-icon { font-variation-settings: "FILL" 0, "wght" 420, "GRAD" 0, "opsz" 24 !important; } body.liquid-glass-preview.liquid-glass-preview .lg-v3-chevron { opacity: .45 !important; font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24 !important; } /* ---- Sub-fichas: misma receta de volumen ---- */ body.liquid-glass-preview.liquid-glass-preview .lg-v3-child { border-radius: 16px !important; background: linear-gradient(180deg, rgba(255, 255, 255, .98) 0%, rgba(255, 255, 255, .84) 45%, rgba(233, 239, 248, .76) 100%) !important; border: 1px solid rgba(255, 255, 255, .95) !important; box-shadow: inset 0 2px 1px #fff, inset 0 -6px 10px -5px var(--v4-shade), 0 4px 10px -4px rgba(95, 115, 155, .3), 0 10px 22px -12px rgba(95, 115, 155, .26) !important; } body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-expanded .lg-v3-child:hover { background: linear-gradient(180deg, #fff, rgba(238, 244, 252, .9)) !important; transform: translate3d(0, -2px, 0) !important; box-shadow: inset 0 2px 1px #fff, inset 0 -6px 10px -5px var(--v4-shade), 0 8px 16px -5px rgba(95, 115, 155, .36), 0 16px 30px -14px rgba(95, 115, 155, .3) !important; } body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-expanded .lg-v3-child.is-active { background: linear-gradient(180deg, #fff, rgba(226, 239, 255, .94)) !important; border-color: #fff !important; box-shadow: inset 0 2px 1px #fff, inset 0 -8px 12px -5px rgba(90, 140, 215, .3), 0 0 0 1px rgba(150, 190, 255, .55), 0 8px 18px -5px rgba(47, 111, 240, .42), 0 16px 32px -14px rgba(47, 111, 240, .34) !important; } body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-expanded .lg-v3-child.is-active .lg-v3-child-icon, body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-expanded .lg-v3-child.is-active .lg-v3-child-label { color: var(--v4-accent) !important; } /* Boton padre y capsula de hijos, con el mismo relieve. */ body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-expanded .lg-v3-main { background: linear-gradient(180deg, rgba(255, 255, 255, .98) 0%, rgba(255, 255, 255, .84) 45%, rgba(233, 239, 248, .76) 100%) !important; border: 1px solid rgba(255, 255, 255, .95) !important; box-shadow: inset 0 2px 1px #fff, inset 0 -7px 12px -6px var(--v4-shade), 0 5px 12px -5px rgba(95, 115, 155, .32), 0 14px 28px -14px rgba(95, 115, 155, .28) !important; } body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-expanded .lg-v3-children { background: linear-gradient(180deg, rgba(255, 255, 255, .9) 0%, rgba(240, 244, 251, .8) 100%) !important; border: 1px solid rgba(255, 255, 255, .92) !important; box-shadow: inset 0 2px 1px #fff, inset 0 -10px 18px -12px var(--v4-shade), 0 10px 26px -16px rgba(95, 115, 155, .3) !important; } body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-expanded .lg-v3-main::after { background: linear-gradient(180deg, rgba(255, 255, 255, .95), rgba(238, 243, 250, .8)) !important; border-top-color: rgba(255, 255, 255, .95) !important; border-bottom-color: rgba(255, 255, 255, .95) !important; } /* ============================================================ V4.3 — IRIDISCENCIA + ANIMACION GELATINA ------------------------------------------------------------ Las dos caracteristicas de la referencia que faltaban: - BORDES IRIDISCENTES: reflejos en azul / cian / violeta en el canto del vidrio. Se hacen con border-image sobre un degradado multicolor. Ojo: border-image NO respeta border-radius, asi que se aplica en un ::after superpuesto usando la tecnica de "mascara doble" (mask-composite: exclude), que si redondea. - ANIMACION GELATINA: el despliegue usa una curva con rebote (overshoot) en vez de una desaceleracion seca. La ficha se pasa un poco de su ancho final y vuelve, que es lo que da la sensacion elastica de liquido. ============================================================ */ body.liquid-glass-preview.liquid-glass-preview .lg-nav-v3 { /* Curva con overshoot: el >1 en el tercer valor es el rebote. */ --v4-jelly: cubic-bezier(.34, 1.56, .64, 1); --v4-jelly-soft: cubic-bezier(.22, 1.35, .36, 1); --v4-irid: linear-gradient(115deg, rgba(120, 190, 255, .9) 0%, rgba(160, 230, 255, .75) 18%, rgba(255, 255, 255, .95) 36%, rgba(180, 170, 255, .8) 58%, rgba(130, 200, 255, .85) 78%, rgba(255, 255, 255, .9) 100%); } /* ---- Borde iridiscente de la ficha ---- El ::after dibuja SOLO el canto: se pinta el degradado y se le recorta el interior con dos mascaras superpuestas, dejando un anillo de 1.5px que sigue el border-radius. */ body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble { position: relative !important; transition: min-width var(--lg-v3-speed) var(--v4-jelly), max-width var(--lg-v3-speed) var(--v4-jelly), transform 320ms var(--v4-jelly), background 220ms ease, border-color 220ms ease, box-shadow 220ms ease !important; } /* El :not(:last-child) va incluido a proposito: el arreglo de los "bloques fantasma" oculta ese selector con MAS especificidad que .lg-v3-bubble::after a secas, y sin repetirlo aca el anillo iridiscente solo aparecia en la ultima ficha. */ body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble::after, body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble:not(:last-child)::after { content: "" !important; display: block !important; position: absolute !important; inset: 0 !important; border-radius: inherit !important; padding: 1.5px !important; background: var(--v4-irid) !important; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important; -webkit-mask-composite: xor !important; mask-composite: exclude !important; opacity: .55 !important; pointer-events: none !important; z-index: 3 !important; transition: opacity 260ms ease !important; } body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-hover::after { opacity: .95 !important; } body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-active::after { opacity: .85 !important; } /* Desplegada la ficha no pinta fondo, asi que su anillo tampoco: el borde iridiscente pasa al boton padre y a la capsula. */ body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-expanded::after { display: none !important; } body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-expanded .lg-v3-main, body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-expanded .lg-v3-children, body.liquid-glass-preview.liquid-glass-preview .lg-v3-child { position: relative !important; } body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-expanded .lg-v3-children::after, body.liquid-glass-preview.liquid-glass-preview .lg-v3-child::after { content: "" !important; display: block !important; position: absolute !important; inset: 0 !important; border-radius: inherit !important; padding: 1.5px !important; background: var(--v4-irid) !important; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important; -webkit-mask-composite: xor !important; mask-composite: exclude !important; opacity: .5 !important; pointer-events: none !important; z-index: 3 !important; } body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-expanded .lg-v3-child:hover::after, body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-expanded .lg-v3-child.is-active::after { opacity: .9 !important; } /* Borde iridiscente tambien en la barra grande. */ body.liquid-glass-preview.liquid-glass-preview .main-nav.lg-v3-ready { position: relative !important; } body.liquid-glass-preview.liquid-glass-preview .main-nav.lg-v3-ready::before { content: "" !important; display: block !important; position: absolute !important; inset: 0 !important; border-radius: inherit !important; padding: 1.5px !important; background: var(--v4-irid) !important; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important; -webkit-mask-composite: xor !important; mask-composite: exclude !important; opacity: .5 !important; pointer-events: none !important; z-index: 6 !important; } /* ---- ANIMACION GELATINA ---- La capsula de hijos y el cuello tambien con rebote, para que el despliegue se lea como una sola masa elastica y no como partes moviendose por separado. */ body.liquid-glass-preview.liquid-glass-preview .lg-v3-children { transition: max-width var(--lg-v3-speed) var(--v4-jelly-soft), padding 240ms var(--v4-jelly-soft), opacity 180ms ease !important; } body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-expanded .lg-v3-main::after { transition: width 260ms var(--v4-jelly), height 260ms var(--v4-jelly) !important; } /* Las sub-fichas entran con un leve rebote de escala. Es una transicion, NO la animacion vieja que arrancaba en opacity:0 y dejaba el desplegable en blanco medio segundo. */ body.liquid-glass-preview.liquid-glass-preview .lg-v3-child { transition: transform 300ms var(--v4-jelly), background 200ms ease, border-color 200ms ease, box-shadow 200ms ease !important; } /* Click: hundido breve, para el "efecto hover y click fluido". */ body.liquid-glass-preview.liquid-glass-preview .lg-v3-main:active, body.liquid-glass-preview.liquid-glass-preview .lg-v3-child:active { transform: translate3d(0, 1px, 0) scale(.97) !important; transition: transform 90ms ease !important; } @media (prefers-reduced-motion: reduce) { body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble, body.liquid-glass-preview.liquid-glass-preview .lg-v3-children, body.liquid-glass-preview.liquid-glass-preview .lg-v3-child { transition-timing-function: ease !important; } } /* ---- ARCOS/BURBUJAS SUELTAS SOBRE LAS FICHAS ---- El anillo iridiscente se dibuja en .lg-v3-bubble::after, que es el MISMO pseudo-elemento que usaba el conector gooey viejo. Aquella regla le dejaba geometria propia: width: 28px; height: 24px; transform: translateY(-50%) scaleX(.72); El anillo solo redefinia "inset: 0", que fija top/left pero NO gana contra un width/height explicito. Resultado: una caja de 28x24 en la esquina superior izquierda, con border-radius heredado de 22px (o sea, practicamente un circulo) y desplazada hacia arriba por el translateY(-50%) -> el arco que asomaba encima de cada ficha. Se anula toda esa geometria heredada para que el anillo ocupe exactamente el contorno de la ficha. */ body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble::after, body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble:not(:last-child)::after, body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-expanded .lg-v3-children::after, body.liquid-glass-preview.liquid-glass-preview .lg-v3-child::after { width: auto !important; height: auto !important; min-width: 0 !important; max-width: none !important; top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important; transform: none !important; border: 0 !important; box-shadow: none !important; filter: none !important; animation: none !important; } /* ============================================================ V4.4 — EFECTO LUPA / CRISTAL DE AUMENTO (estilo dock Apple) ------------------------------------------------------------ js/liquid-glass-preview.js (attachDockMagnify) escribe en cada sub-ficha la variable --v4-mag: 1 en reposo y hasta ~1.32 en la que esta bajo el cursor, con caida gaussiana hacia los lados. Aca se traduce esa variable en la deformacion optica. El truco para que se lea como VIDRIO y no como un simple zoom: el icono se amplia MAS que la ficha (factor 1.7). Al crecer el contenido mas rapido que su contenedor se percibe aumento por refraccion, que es justo lo que hace una lente. Se anima con transiciones cortas: la posicion la actualiza el JS cuadro a cuadro, asi que una transicion larga se sentiria arrastrada en vez de pegada al cursor. ============================================================ */ body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-expanded .lg-v3-child, body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-expanded .lg-v3-child:hover { /* Crece desde la base y se eleva al agrandarse, como el dock. */ transform: translate3d(0, calc((var(--v4-mag, 1) - 1) * -14px), 0) scale(var(--v4-mag, 1)) !important; transform-origin: center bottom !important; transition: transform 160ms cubic-bezier(.2, 1, .3, 1), background 180ms ease, border-color 180ms ease, box-shadow 180ms ease !important; z-index: 1 !important; } /* La ficha ampliada se pone por encima de sus vecinas. */ body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-expanded .lg-v3-child:hover { z-index: 4 !important; } /* EL AUMENTO: el icono escala mas que la ficha -> refraccion. */ body.liquid-glass-preview.liquid-glass-preview .lg-v3-child .lg-v3-child-icon { display: inline-block !important; transform: scale(calc(1 + (var(--v4-mag, 1) - 1) * 1.35)) !important; transition: transform 160ms cubic-bezier(.2, 1, .3, 1) !important; will-change: transform !important; } /* La etiqueta acompana apenas: si escalara igual que el icono, el texto se empasta y se pierde la sensacion de lente. */ body.liquid-glass-preview.liquid-glass-preview .lg-v3-child .lg-v3-child-label { display: inline-block !important; transform: scale(calc(1 + (var(--v4-mag, 1) - 1) * .4)) !important; transition: transform 160ms cubic-bezier(.2, 1, .3, 1) !important; } /* Brillo del cristal proporcional al aumento: la lente concentra luz. Se apoya en la opacidad del anillo iridiscente ya existente. */ body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-expanded .lg-v3-child::after { opacity: calc(.5 + (var(--v4-mag, 1) - 1) * 1.6) !important; transition: opacity 160ms ease !important; } /* El hundido del click debe ganarle a la lupa mientras dura. */ body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-expanded .lg-v3-child:active { transform: translate3d(0, calc((var(--v4-mag, 1) - 1) * -14px), 0) scale(calc(var(--v4-mag, 1) * .96)) !important; transition: transform 90ms ease !important; } @media (prefers-reduced-motion: reduce) { body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-expanded .lg-v3-child, body.liquid-glass-preview.liquid-glass-preview .lg-v3-child .lg-v3-child-icon, body.liquid-glass-preview.liquid-glass-preview .lg-v3-child .lg-v3-child-label { transform: none !important; } } /* ---- LA FICHA AMPLIADA SE CORTABA ARRIBA ---- La capsula de hijos necesita overflow oculto para animar su ancho (el reveal del desplegable). Pero "hidden" recorta en LOS DOS ejes, asi que la ficha ampliada por la lupa quedaba cortada por arriba. La solucion es overflow-x: clip en vez de hidden. Son distintos: "hidden" convierte al elemento en contenedor de scroll y entonces el otro eje NO puede ser visible (el navegador lo computa como auto). "clip" recorta sin crear contenedor de scroll, y por eso overflow-y: visible SI se respeta. Es el mismo recurso que usa styles.css en .nav-section-items del nav clasico. El rail, en cambio, tiene overflow-x: auto porque necesita scroll real, y ahi no hay truco posible: un contenedor scrollable siempre recorta el otro eje. Por eso se le da altura extra por arriba, que es de donde crece la lupa. */ body.liquid-glass-preview.liquid-glass-preview .lg-v3-children { overflow-x: clip !important; overflow-y: visible !important; } body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-expanded .lg-v3-children, body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-expanded, body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-expanded .lg-v3-child { overflow-x: clip !important; overflow-y: visible !important; } /* Espacio libre arriba dentro del rail para que la ficha ampliada quepa sin tocar el borde. El padding inferior queda mas chico: la lupa crece hacia arriba (transform-origin: center bottom). */ body.liquid-glass-preview.liquid-glass-preview .lg-v3-rail { padding: 20px 12px 10px !important; align-items: flex-end !important; } body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble { align-self: flex-end !important; } /* ---- LA LINEA QUE CRUZA LA FICHA AMPLIADA ---- No era un recorte sino ORDEN DE APILADO. El anillo iridiscente de la capsula (.lg-v3-children::after) tenia z-index:3 y las sub-fichas z-index:1, asi que al crecer por encima del borde de la capsula quedaban POR DEBAJO de ese anillo: el canto superior se dibujaba encima de la ficha y se leia como una linea cortandola. El anillo pasa al fondo (z-index 0) y las fichas por encima. */ body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-expanded .lg-v3-children::after { z-index: 0 !important; } body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-expanded .lg-v3-child { z-index: 2 !important; } body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-expanded .lg-v3-child:hover { z-index: 5 !important; } /* El cuello tambien debajo de las fichas. */ body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-expanded .lg-v3-main::after { z-index: 0 !important; } /* ---- LA LINEA INVISIBLE QUE RECORTABA AL AMPLIAR ---- Era el propio rail. Necesita overflow-x: auto para el scroll horizontal, y un contenedor scrollable SIEMPRE recorta tambien el otro eje: aunque se declare overflow-y: visible, el navegador lo computa como auto. No hay truco CSS que lo evite (el recurso de overflow-x: clip no sirve aca justamente porque impide scrollear). Por eso se invierte el reparto de la lupa: la FICHA casi no crece (13%), y quien se amplia de verdad es el ICONO (2.6x el factor). Ademas de no desbordar, es mas fiel a una lente real: lo que se agranda es el CONTENIDO, no el marco — un cristal de aumento no deforma su propio armazon. La etiqueta acompana apenas (0.25) para que el texto no se empaste. */ body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-expanded .lg-v3-child, body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-expanded .lg-v3-child:hover { overflow: visible !important; } /* El icono ya no vive recortado por su ficha. */ body.liquid-glass-preview.liquid-glass-preview .lg-v3-child .lg-v3-child-icon { position: relative !important; z-index: 2 !important; } /* Con la ficha creciendo poco, el aire de arriba puede achicarse y la barra recupera altura normal. */ body.liquid-glass-preview.liquid-glass-preview .lg-v3-rail { padding: 13px 12px 11px !important; } /* ============================================================ QUE LA LUPA SE SALGA DE LA LINEA DE RECORTE ------------------------------------------------------------ El rail necesita overflow-x: auto para el scroll horizontal, y un contenedor scrollable recorta SIEMPRE tambien el eje vertical. Antes se compenso achicando el crecimiento; ahora se ataca de frente con la tecnica de CAJA EXTENDIDA: padding-top: 56px + margin-top: -56px El recorte ocurre en el borde del PADDING, asi que sumar padding corre esa linea 56px hacia arriba y la ficha ampliada tiene lugar de sobra. El margen negativo de la misma medida devuelve el elemento a su posicion: la barra se ve identica, no crece ni se desplaza — solo se agrando su zona de dibujo. Funciona porque el rail es transparente (su fondo y borde se anularon mas arriba; el vidrio lo pone .main-nav). Si alguna vez se le devuelve un fondo, ese fondo se veria 56px mas alto y habria que rehacer esto de otra forma. Abajo va menos aire: la ficha crece desde su base (transform-origin: center bottom), asi que hacia abajo solo hay que dejar sitio para la sombra. ============================================================ */ body.liquid-glass-preview.liquid-glass-preview .lg-v3-rail { padding-top: 56px !important; margin-top: -56px !important; padding-bottom: 26px !important; margin-bottom: -26px !important; /* Explicito para que la ficha ampliada no dispare una barra de scroll vertical dentro del rail. */ overflow-y: hidden !important; } /* La ficha ampliada tiene que pasar por encima de la capsula y del resto de las fichas, no colarse por detras. */ body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-expanded .lg-v3-child:hover { z-index: 20 !important; } /* Sombra mas presente al ampliarse: refuerza que la ficha se despega del plano y flota por encima de las demas. */ body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-expanded .lg-v3-child:hover { box-shadow: inset 0 2px 1px #fff, inset 0 -6px 10px -5px var(--v4-shade), 0 14px 24px -8px rgba(95, 115, 155, .42), 0 26px 46px -18px rgba(95, 115, 155, .36) !important; } /* ============================================================ CORRECCION: la caja extendida rompio la alineacion vertical ------------------------------------------------------------ El intento anterior (padding-top: 56px + margin-top: -56px) parte de suponer flujo normal. Pero el rail es un ITEM FLEX dentro de .lg-nav-v3, y ahi el centrado se calcula sobre la caja de MARGEN: al restarle 56px por arriba, el navegador lo centro tomando una caja mas chica y el contenido termino desplazado hacia arriba, asomando fuera de la barra. Por eso las fichas se veian pegadas al techo y cortadas. Nueva estrategia, sin margenes negativos: la ficha crece desde su CENTRO en vez de desde su base. Al repartirse el crecimiento mitad arriba y mitad abajo, necesita la mitad de aire por lado, y eso entra en el espacio que ya existe. Sin trucos de caja, sin tocar la alineacion. ============================================================ */ body.liquid-glass-preview.liquid-glass-preview .lg-v3-rail { padding: 16px 12px 14px !important; margin-top: 0 !important; margin-bottom: 0 !important; align-items: center !important; overflow-y: hidden !important; } body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble { align-self: center !important; } /* Crecimiento desde el centro: la mitad de desborde por lado. */ body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-expanded .lg-v3-child, body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-expanded .lg-v3-child:hover, body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-expanded .lg-v3-child:active { transform-origin: center center !important; } /* Elevacion mas corta: sumaba desborde justo del lado que recorta. */ body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-expanded .lg-v3-child, body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-expanded .lg-v3-child:hover { transform: translate3d(0, calc((var(--v4-mag, 1) - 1) * -5px), 0) scale(var(--v4-mag, 1)) !important; } body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-expanded .lg-v3-child:active { transform: translate3d(0, calc((var(--v4-mag, 1) - 1) * -5px), 0) scale(calc(var(--v4-mag, 1) * .96)) !important; } /* La capsula deja pasar el desborde vertical (overflow-x: clip no crea contenedor de scroll, asi que el eje Y sigue visible). */ body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-expanded .lg-v3-children { overflow-x: clip !important; overflow-y: visible !important; } /* ---- LA PRIMERA SUB-FICHA SE CORTABA AL AMPLIARSE ---- Mismo mecanismo que el recorte vertical, pero en horizontal: la capsula usa overflow-x: clip (necesario para animar su ancho) y la primera ficha, al crecer, se sale por la IZQUIERDA y queda cortada contra ese borde. La ultima tenia el mismo problema por la derecha. Como crece desde el centro, se pasa hacia cada lado la mitad de su crecimiento: 72px de ancho * 34% / 2 = ~12px. Con 16px de margen interno a cada lado entra con holgura. El ancho reservado para el desplegable se subio en paralelo en el JS (la constante de expandedWidth), si no la ultima ficha quedaba fuera del limite. */ body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-expanded .lg-v3-children { padding-left: 16px !important; padding-right: 16px !important; } /* ---- ETIQUETA DE LA SUB-PESTANA ACTIVA EN LA FICHA CERRADA ---- Ademas del icono (que cambia desde el JS), la ficha de la categoria activa lleva un subrayado del color de acento bajo su nombre: marca "estas dentro de este grupo" incluso con el desplegable cerrado, sin tener que renombrar la categoria. */ body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-active .lg-v3-label { position: relative !important; } body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-active .lg-v3-label::after { content: "" !important; position: absolute !important; left: 50% !important; bottom: -4px !important; width: 60% !important; height: 2px !important; transform: translateX(-50%) !important; border-radius: 999px !important; background: linear-gradient(90deg, var(--v4-accent-2), var(--v4-accent)) !important; box-shadow: 0 0 8px rgba(47, 111, 240, .7) !important; } /* ---- INDICADOR DUPLICADO ---- Convivian dos marcas de "activo": .lg-v3-active-dot (la barrita que el JS dibuja SOLO en categorias sin hijos, como Inicio) y el subrayado ::after que se agrego despues sobre la etiqueta, que aplica a TODAS. En Inicio se veian las dos, una encima de la otra. Se conserva el subrayado —sirve para cualquier categoria, con hijos o sin ellos— y se retira la barrita. */ body.liquid-glass-preview.liquid-glass-preview .lg-v3-active-dot { display: none !important; } /* ---- ACTIVO EN AZUL, DE VERDAD ---- Antes era casi blanco con un halo tenue: no se distinguia. Ahora la ficha activa se tine de azul manteniendo el vidrio (el degradado sigue yendo de claro a oscuro, que es lo que le da volumen). */ body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-active { background: linear-gradient(180deg, rgba(238, 246, 255, .98) 0%, rgba(206, 228, 255, .96) 45%, rgba(176, 209, 255, .94) 100%) !important; border-color: rgba(255, 255, 255, .96) !important; box-shadow: inset 0 2px 1px rgba(255, 255, 255, .95), inset 0 -9px 16px -6px rgba(60, 115, 205, .4), 0 0 0 1px rgba(120, 172, 250, .6), 0 10px 22px -6px rgba(47, 111, 240, .5), 0 20px 44px -14px rgba(47, 111, 240, .45) !important; } body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-active .lg-v3-icon, body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-active .lg-v3-label { color: #1552c8 !important; } body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-active .lg-v3-chevron { color: #1552c8 !important; opacity: .6 !important; } /* Subrayado un poco mas presente, acompanando el azul mas fuerte. */ body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-active .lg-v3-label::after { height: 3px !important; width: 66% !important; bottom: -5px !important; background: linear-gradient(90deg, #4a8dff, #1552c8) !important; box-shadow: 0 0 10px rgba(21, 82, 200, .8) !important; } /* La sub-ficha activa dentro del desplegable, en el mismo azul. */ body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-expanded .lg-v3-child.is-active { background: linear-gradient(180deg, rgba(238, 246, 255, .98) 0%, rgba(206, 228, 255, .96) 48%, rgba(176, 209, 255, .94) 100%) !important; border-color: rgba(255, 255, 255, .96) !important; box-shadow: inset 0 2px 1px rgba(255, 255, 255, .95), inset 0 -8px 14px -6px rgba(60, 115, 205, .38), 0 0 0 1px rgba(120, 172, 250, .58), 0 10px 20px -6px rgba(47, 111, 240, .46), 0 18px 36px -14px rgba(47, 111, 240, .4) !important; } body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-expanded .lg-v3-child.is-active .lg-v3-child-icon, body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-expanded .lg-v3-child.is-active .lg-v3-child-label { color: #1552c8 !important; } /* ============================================================ CERRADA PERO CON LA PESTANA ELEGIDA A LA VISTA ------------------------------------------------------------ Mismo comportamiento que el nav clasico: cuando un grupo se pliega pero contiene la pestana activa, esa pestana NO se esconde — queda al lado del nombre del grupo. (En styles.css es .nav-section-collapsible.collapsed.has-active). Aca el estado es .is-active SIN .is-expanded. Se reutiliza la misma estructura del desplegable pero dejando visible una sola sub-ficha: la activa. Las demas se ocultan con display:none, que ademas las saca del ancho. ============================================================ */ /* Ancho justo para el boton de categoria + una sub-ficha. */ body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-active:not(.is-expanded), body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-active.is-hover:not(.is-expanded) { min-width: 200px !important; max-width: 200px !important; background: none !important; border-color: transparent !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; overflow: visible !important; } /* Sin hijos (p.ej. Inicio) no hay nada que mostrar al lado: la ficha conserva su tamano y su vidrio normales. */ body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-single.is-active:not(.is-expanded) { min-width: 92px !important; max-width: 92px !important; background: linear-gradient(180deg, rgba(238, 246, 255, .98) 0%, rgba(206, 228, 255, .96) 45%, rgba(176, 209, 255, .94) 100%) !important; border-color: rgba(255, 255, 255, .96) !important; box-shadow: inset 0 2px 1px rgba(255, 255, 255, .95), inset 0 -9px 16px -6px rgba(60, 115, 205, .4), 0 0 0 1px rgba(120, 172, 250, .6), 0 10px 22px -6px rgba(47, 111, 240, .5), 0 20px 44px -14px rgba(47, 111, 240, .45) !important; } body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-expanded::before, body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-active:not(.is-single):not(.is-expanded)::before { display: none !important; } /* El boton de categoria toma aspecto de ficha propia, igual que en el desplegado (la burbuja paso a ser solo contenedor). */ body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-active:not(.is-single):not(.is-expanded) .lg-v3-main { position: relative !important; border-radius: 20px !important; background: linear-gradient(180deg, rgba(238, 246, 255, .98) 0%, rgba(206, 228, 255, .96) 45%, rgba(176, 209, 255, .94) 100%) !important; border: 1px solid rgba(255, 255, 255, .96) !important; box-shadow: inset 0 2px 1px rgba(255, 255, 255, .95), inset 0 -9px 16px -6px rgba(60, 115, 205, .38), 0 0 0 1px rgba(120, 172, 250, .55), 0 8px 18px -6px rgba(47, 111, 240, .42) !important; z-index: 2 !important; } /* El cuello, para que se lea como una sola pieza. */ body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-active:not(.is-single):not(.is-expanded) .lg-v3-main::after { content: "" !important; display: block !important; position: absolute !important; left: 100% !important; right: auto !important; top: 50% !important; width: 12px !important; height: 24px !important; transform: translateY(-50%) !important; border-radius: 0 !important; background: linear-gradient(180deg, rgba(255, 255, 255, .95), rgba(238, 243, 250, .8)) !important; border-top: 1px solid rgba(255, 255, 255, .95) !important; border-bottom: 1px solid rgba(255, 255, 255, .95) !important; opacity: 1 !important; animation: none !important; z-index: 0 !important; } /* La capsula, con una sola sub-ficha dentro. */ body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-active:not(.is-single):not(.is-expanded) .lg-v3-children { max-width: 108px !important; min-width: 0 !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; overflow-x: clip !important; overflow-y: visible !important; margin-left: 10px !important; padding: 6px 12px !important; border: 1px solid rgba(255, 255, 255, .92) !important; border-radius: 22px !important; background: linear-gradient(180deg, rgba(255, 255, 255, .9) 0%, rgba(240, 244, 251, .8) 100%) !important; box-shadow: inset 0 2px 1px #fff, inset 0 -10px 18px -12px var(--v4-shade), 0 10px 24px -16px rgba(95, 115, 155, .3) !important; transform: none !important; } /* Solo la elegida: las demas fuera, tambien del calculo de ancho. */ body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-active:not(.is-expanded) .lg-v3-child:not(.is-active) { display: none !important; } body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-active:not(.is-expanded) .lg-v3-child.is-active { display: flex !important; opacity: 1 !important; visibility: visible !important; transform: none !important; } /* ---- LUPA RECOGIDA POR DEFECTO (se expande al tocarla o hacer foco) ---- */ body.liquid-glass-preview.liquid-glass-preview .inline-search-pill:not(.lg-search-open), body.liquid-glass-preview.liquid-glass-preview .main-nav:is(.lg-v3-ready, .lgb-goo-ready) .inline-search-pill:not(.lg-search-open), body.liquid-glass-preview.liquid-glass-preview .lg-nav-v3 .inline-search-pill:not(.lg-search-open) { width: 48px !important; min-width: 48px !important; max-width: 48px !important; height: 48px !important; border-radius: 999px !important; justify-content: center !important; padding: 0 !important; gap: 0 !important; cursor: pointer !important; transition: width 0.32s cubic-bezier(.16,1,.22,1), max-width 0.32s cubic-bezier(.16,1,.22,1), padding 0.32s ease !important; } body.liquid-glass-preview.liquid-glass-preview .inline-search-pill:not(.lg-search-open) #inline-search-input, body.liquid-glass-preview.liquid-glass-preview .main-nav:is(.lg-v3-ready, .lgb-goo-ready) .inline-search-pill:not(.lg-search-open) #inline-search-input, body.liquid-glass-preview.liquid-glass-preview .lg-nav-v3 .inline-search-pill:not(.lg-search-open) #inline-search-input { width: 0 !important; min-width: 0 !important; opacity: 0 !important; pointer-events: none !important; padding: 0 !important; margin: 0 !important; } body.liquid-glass-preview.liquid-glass-preview .inline-search-pill.lg-search-open, body.liquid-glass-preview.liquid-glass-preview .main-nav:is(.lg-v3-ready, .lgb-goo-ready) .inline-search-pill.lg-search-open, body.liquid-glass-preview.liquid-glass-preview .lg-nav-v3 .inline-search-pill.lg-search-open { width: min(260px, 24vw) !important; min-width: 180px !important; max-width: min(260px, 24vw) !important; height: 48px !important; border-radius: 999px !important; justify-content: flex-start !important; padding: 0 14px !important; gap: 8px !important; transition: width 0.32s cubic-bezier(.16,1,.22,1), max-width 0.32s cubic-bezier(.16,1,.22,1), padding 0.32s ease !important; } body.liquid-glass-preview.liquid-glass-preview .inline-search-pill.lg-search-open #inline-search-input, body.liquid-glass-preview.liquid-glass-preview .main-nav:is(.lg-v3-ready, .lgb-goo-ready) .inline-search-pill.lg-search-open #inline-search-input, body.liquid-glass-preview.liquid-glass-preview .lg-nav-v3 .inline-search-pill.lg-search-open #inline-search-input { width: 100% !important; min-width: 0 !important; flex: 1 1 auto !important; opacity: 1 !important; pointer-events: auto !important; padding: 0 2px !important; border: 0 !important; background: transparent !important; outline: none !important; } /* La lupa deja de ser el boton entero y pasa a ser el icono del campo. */ body.liquid-glass-preview.liquid-glass-preview .lg-nav-v3 .inline-search-icon { flex: 0 0 auto !important; opacity: .7 !important; } /* El wrapper tiene que dejarle el ancho al pill. */ body.liquid-glass-preview.liquid-glass-preview .lg-nav-v3 .inline-search-wrapper, body.liquid-glass-preview.liquid-glass-preview .lg-v3-actions { flex: 0 1 auto !important; min-width: 0 !important; } /* ---- EL CUELLO COLGANDO EN LA CATEGORIA ACTIVA CERRADA ---- El ancho fijo de 200px daba JUSTO: boton 92 + separacion 10 + capsula 98 = 200 exactos. Sin margen para bordes ni redondeos, la capsula terminaba comprimida por el reparto flex y se veia casi vacia, con el cuello asomando al aire — sobre todo en el ultimo grupo, pegado al buscador, donde ademas competia por el espacio. Se le da holgura y se impide que la capsula ceda ancho (flex-shrink: 0), que era lo que la aplastaba. */ body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-active:not(.is-expanded), body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-active.is-hover:not(.is-expanded) { min-width: 216px !important; max-width: 216px !important; } body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-active:not(.is-single):not(.is-expanded) .lg-v3-children { flex: 0 0 auto !important; width: 102px !important; max-width: 102px !important; } body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-active:not(.is-single):not(.is-expanded) .lg-v3-main { flex: 0 0 92px !important; } /* Inicio (sin hijos) no entra en nada de esto. */ body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-single.is-active:not(.is-expanded) { min-width: 92px !important; max-width: 92px !important; } /* Sin cuello si por lo que sea la capsula no llegara a mostrarse: antes quedaba un muñon suelto apuntando al buscador. */ body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-single .lg-v3-main::after, body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble:not(.is-active):not(.is-expanded) .lg-v3-main::after { content: none !important; display: none !important; } /* ---- QUE ENTRE TAMBIEN A ZOOM 100% ---- La pestana activa al costado ocupaba ~124px extra por grupo. A 90% de zoom el viewport en px CSS es mayor y entraba; a 100% no, y la capsula quedaba fuera del area visible del rail (que recorta), asi que solo asomaba el cuello. No se resuelve con media queries —el zoom del navegador cambia el viewport en px CSS y cualquier umbral quedaria arbitrario— sino bajando lo que la funcion cuesta: chip compacto (58px en vez de 72) y menos relleno. Pasa de ~124px extra a ~84px, que entra holgado a 100% y sigue mostrando icono y nombre. */ body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-active:not(.is-expanded), body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-active.is-hover:not(.is-expanded) { min-width: 178px !important; max-width: 178px !important; } body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-active:not(.is-single):not(.is-expanded) .lg-v3-children { width: 76px !important; max-width: 76px !important; margin-left: 8px !important; padding: 5px 8px !important; } body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-active:not(.is-single):not(.is-expanded) .lg-v3-child.is-active { flex: 0 0 58px !important; width: 58px !important; height: 50px !important; border-radius: 14px !important; padding: 4px 3px !important; } body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-active:not(.is-single):not(.is-expanded) .lg-v3-child.is-active .lg-v3-child-icon { font-size: .95rem !important; } body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-active:not(.is-single):not(.is-expanded) .lg-v3-child.is-active .lg-v3-child-label { font-size: .44rem !important; line-height: 1.05 !important; } /* Cuello mas corto, acompanando la separacion nueva. */ body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-active:not(.is-single):not(.is-expanded) .lg-v3-main::after { width: 10px !important; height: 20px !important; } /* El buscador cede un poco para que las pestanas respiren. */ body.liquid-glass-preview.liquid-glass-preview .main-nav:is(.lg-v3-ready, .lgb-goo-ready) .inline-search-pill, body.liquid-glass-preview.liquid-glass-preview .lg-nav-v3 .inline-search-pill, body.liquid-glass-preview.liquid-glass-preview .lg-nav-v3 .inline-search-pill:not(.lg-search-open) { width: min(220px, 18vw) !important; min-width: 140px !important; max-width: min(220px, 18vw) !important; } /* ---- INICIO NO DEBE ENSANCHARSE ---- Las categorias SIN hijos (.is-single, como Inicio) no tienen nada que mostrar al costado, asi que no participan del ensanchado del grupo activo. Se estiraba por un empate de especificidad: la excepcion .is-single.is-active:not(.is-expanded) pesa 4 clases, igual que .is-active.is-hover:not(.is-expanded) del bloque de ancho; como esa ultima aparece despues en el archivo, ganaba al pasar el mouse. Este bloque va al final y cubre todas las combinaciones, para que no vuelva a depender del orden. */ body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-single, body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-single.is-hover, body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-single.is-active, body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-single.is-expanded, body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-single.is-active.is-hover, body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-single.is-active:not(.is-expanded), body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-single.is-active.is-hover:not(.is-expanded) { min-width: 92px !important; max-width: 92px !important; } /* Y conserva su vidrio propio: el bloque del grupo activo lo vuelve transparente (pasa a ser contenedor), pero Inicio sigue siendo una ficha comun y sin fondo quedaba flotando el contenido solo. */ body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-single.is-active, body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-single.is-active.is-hover, body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-single.is-active:not(.is-expanded), body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-single.is-active.is-hover:not(.is-expanded) { background: linear-gradient(180deg, rgba(238, 246, 255, .98) 0%, rgba(206, 228, 255, .96) 45%, rgba(176, 209, 255, .94) 100%) !important; border: 1px solid rgba(255, 255, 255, .96) !important; -webkit-backdrop-filter: blur(14px) saturate(135%) !important; backdrop-filter: blur(14px) saturate(135%) !important; box-shadow: inset 0 2px 1px rgba(255, 255, 255, .95), inset 0 -9px 16px -6px rgba(60, 115, 205, .4), 0 0 0 1px rgba(120, 172, 250, .6), 0 10px 22px -6px rgba(47, 111, 240, .5), 0 20px 44px -14px rgba(47, 111, 240, .45) !important; } /* Su boton interno no debe tomar el aspecto de "ficha dentro de contenedor" que usan los grupos con hijos. */ body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-single .lg-v3-main { background: transparent !important; border: 0 !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } /* El boton de una categoria con sub-pestanas no navega en escritorio (se despliega sola al pasar el mouse), asi que tampoco debe invitarlo: cursor normal y sin el hundido del click. */ @media (hover: hover) and (pointer: fine) { body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble:not(.is-single) > .lg-v3-main { cursor: default !important; } body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble:not(.is-single) > .lg-v3-main:active { transform: none !important; } } /* ---- CATEGORIA + SELECCION, COMO UNA SOLA PIEZA ---- El chip de la pestana elegida se veia como un boton macizo pegado al lado, sin relacion con el vidrio de la categoria. Pasaba porque todo el estilo lindo del hijo activo estaba escrito para el estado DESPLEGADO (.is-expanded ...), y con el grupo cerrado esa regla no aplica: quedaba mandando el azul plano de la hoja original. Ahora el conjunto se lee como una pieza: la categoria en vidrio azul claro, el cuello con un degradado que va de claro a azul — como si el color fluyera hacia la seleccion— y el chip como remate saturado. */ body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-active:not(.is-single):not(.is-expanded) .lg-v3-child.is-active { background: linear-gradient(165deg, color-mix(in srgb, var(--v4-accent-2) 78%, white 22%) 0%, var(--v4-accent-2) 52%, var(--v4-accent) 100%) !important; border: 1px solid rgba(255, 255, 255, .8) !important; box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .9), inset 0 -7px 12px -6px color-mix(in srgb, var(--v4-accent) 55%, black 15%), 0 6px 14px -5px color-mix(in srgb, var(--v4-accent) 55%, transparent), 0 14px 28px -12px color-mix(in srgb, var(--v4-accent) 45%, transparent) !important; transform: none !important; } body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-active:not(.is-single):not(.is-expanded) .lg-v3-child.is-active .lg-v3-child-icon, body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-active:not(.is-single):not(.is-expanded) .lg-v3-child.is-active .lg-v3-child-label { color: #fff !important; text-shadow: 0 1px 2px rgba(10, 40, 110, .4) !important; } /* Anillo iridiscente mas tenue sobre el azul saturado: encima de un fondo oscuro se veia como un contorno duro. */ body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-active:not(.is-expanded) .lg-v3-child.is-active::after { opacity: .3 !important; } /* La capsula que lo contiene, casi invisible: el protagonismo es del chip, no de su marco. */ body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-active:not(.is-single):not(.is-expanded) .lg-v3-children { background: linear-gradient(180deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, .2)) !important; border-color: rgba(255, 255, 255, .7) !important; box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .8), 0 6px 16px -14px rgba(60, 110, 180, .35) !important; } /* El cuello degrada de claro a azul: el color parece fluir desde la categoria hacia la pestana elegida. */ body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-active:not(.is-single):not(.is-expanded) .lg-v3-main::after { background: linear-gradient(90deg, color-mix(in srgb, var(--v4-accent-2) 25%, white 75%) 0%, color-mix(in srgb, var(--v4-accent-2) 45%, white 55%) 100%) !important; border-top-color: rgba(255, 255, 255, .9) !important; border-bottom-color: rgba(255, 255, 255, .9) !important; } /* Mismo tratamiento para el hijo activo con el grupo DESPLEGADO, asi abrir y cerrar no cambia el aspecto de la seleccion. */ body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-expanded .lg-v3-child.is-active { background: linear-gradient(165deg, color-mix(in srgb, var(--v4-accent-2) 78%, white 22%) 0%, var(--v4-accent-2) 52%, var(--v4-accent) 100%) !important; border: 1px solid rgba(255, 255, 255, .8) !important; box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .9), inset 0 -7px 12px -6px color-mix(in srgb, var(--v4-accent) 55%, black 15%), 0 6px 14px -5px color-mix(in srgb, var(--v4-accent) 55%, transparent), 0 14px 28px -12px color-mix(in srgb, var(--v4-accent) 45%, transparent) !important; } body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-expanded .lg-v3-child.is-active .lg-v3-child-icon, body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-expanded .lg-v3-child.is-active .lg-v3-child-label { color: #fff !important; text-shadow: 0 1px 2px rgba(10, 40, 110, .4) !important; } /* ============================================================ CATEGORIA + SELECCION: CINTURA LIQUIDA ------------------------------------------------------------ El cuello era un rectangulo con bordes arriba y abajo: se veia como un palito uniendo dos cajas, justo lo contrario del efecto liquido. Tres cambios: 1. CINTURA CONCAVA. Dos radial-gradient con el centro FUERA del elemento recortan el cuello por arriba y por abajo. Al ser circulos transparentes que "muerden" la forma, el borde queda curvado hacia adentro — que es como se ve una gota estirada entre dos superficies. Un border-radius normal solo puede redondear hacia afuera (convexo) y por eso no sirve aca. 2. UNA SOLA MARCA DE SELECCION. Con el chip a la vista, el subrayado bajo el nombre sobraba: dos indicadores del mismo estado, compitiendo. 3. SIN CAPSULA ALREDEDOR DEL CHIP. Un marco para un solo elemento solo agrega ruido; el chip se conecta directo por la cintura. ============================================================ */ body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-active:not(.is-single):not(.is-expanded) .lg-v3-main::after { --v4-neck: rgba(206, 228, 255, .96); width: 22px !important; height: 34px !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; background: radial-gradient(circle at 50% -17px, transparent 17px, var(--v4-neck) 17.5px) top / 100% 50% no-repeat, radial-gradient(circle at 50% calc(100% + 17px), transparent 17px, var(--v4-neck) 17.5px) bottom / 100% 50% no-repeat !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } /* La capsula desaparece: queda ficha - cintura - chip. */ body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-active:not(.is-single):not(.is-expanded) .lg-v3-children { background: none !important; border: 0 !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; padding: 0 !important; margin-left: 20px !important; width: 62px !important; max-width: 62px !important; overflow: visible !important; } body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-active:not(.is-single):not(.is-expanded) .lg-v3-children::after { display: none !important; } /* Sin el marco, el chip puede crecer y equilibrar la ficha grande. */ body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-active:not(.is-single):not(.is-expanded) .lg-v3-child.is-active { flex: 0 0 62px !important; width: 62px !important; height: 58px !important; border-radius: 17px !important; padding: 5px 4px !important; } body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-active:not(.is-single):not(.is-expanded) .lg-v3-child.is-active .lg-v3-child-icon { font-size: 1.06rem !important; } body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-active:not(.is-single):not(.is-expanded) .lg-v3-child.is-active .lg-v3-child-label { font-size: .46rem !important; } body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-active:not(.is-expanded), body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-active.is-hover:not(.is-expanded) { min-width: 176px !important; max-width: 176px !important; } /* Una sola marca: con el chip visible, sobra el subrayado. */ body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-active:not(.is-single) .lg-v3-label::after { display: none !important; } /* Y el chevron mas discreto: ya no compite por atencion. */ body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-active:not(.is-single):not(.is-expanded) .lg-v3-chevron { opacity: .3 !important; } /* ============================================================ REDISENO DEL DESPLIEGUE: UNA SOLA PIEZA ------------------------------------------------------------ Hasta aca el desplegado eran varias formas sueltas —ficha del grupo + cuello + capsula + sub-fichas— y por mas que se puliera el cuello, siempre se leia como piezas pegadas con un palito. Cambio de enfoque: la burbuja vuelve a ser UNA sola superficie de vidrio continua, que simplemente se alarga, y las sub-fichas viven DENTRO de ella. Sin cuello, sin capsula, sin costuras: al abrirse parece que el vidrio se estira, que es justo el efecto liquido que se buscaba. ============================================================ */ /* La burbuja conserva su vidrio en TODOS los estados (antes se volvia transparente al abrirse para no apilar fondos; ahora es la unica que pinta, asi que no hay nada que apilar). */ body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-expanded, body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-active.is-expanded, body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-active:not(.is-expanded), body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-active.is-hover:not(.is-expanded) { background: linear-gradient(180deg, rgba(255, 255, 255, .96) 0%, rgba(255, 255, 255, .8) 42%, rgba(231, 237, 247, .72) 100%) !important; border: 1px solid rgba(255, 255, 255, .95) !important; -webkit-backdrop-filter: blur(16px) saturate(150%) !important; backdrop-filter: blur(16px) saturate(150%) !important; box-shadow: inset 0 2px 1px rgba(255, 255, 255, 1), inset 0 -8px 14px -7px var(--v4-shade), 0 6px 14px -6px rgba(95, 115, 155, .34), 0 16px 34px -16px rgba(95, 115, 155, .3) !important; border-radius: 26px !important; overflow: visible !important; } /* La categoria activa se tine apenas, sin dejar de ser la misma pieza. */ body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-active:not(.is-expanded), body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-active.is-hover:not(.is-expanded) { background: linear-gradient(180deg, rgba(247, 251, 255, .97) 0%, rgba(226, 240, 255, .94) 45%, rgba(206, 228, 255, .9) 100%) !important; box-shadow: inset 0 2px 1px rgba(255, 255, 255, 1), inset 0 -9px 15px -7px rgba(60, 115, 205, .34), 0 0 0 1px rgba(140, 184, 252, .5), 0 8px 18px -6px rgba(47, 111, 240, .38), 0 18px 38px -16px rgba(47, 111, 240, .34) !important; } /* El brillo superior recorre toda la pieza, tambien estirada. */ body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-expanded::before, body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-active:not(.is-single):not(.is-expanded)::before { display: block !important; inset: 3px 8px auto 8px !important; height: 38% !important; border-radius: 20px 20px 50% 50% !important; background: linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, 0)) !important; opacity: .8 !important; } /* SIN CUELLO: era el recurso para unir piezas separadas; ya no hay piezas que unir. */ body.liquid-glass-preview.liquid-glass-preview .lg-v3-main::after { content: none !important; display: none !important; } /* El boton del grupo es solo contenido dentro del vidrio. */ body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-expanded .lg-v3-main, body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-active:not(.is-expanded) .lg-v3-main { background: transparent !important; border: 0 !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; border-radius: 0 !important; } /* Y la capsula de hijos deja de existir como forma: solo agrupa. */ body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-expanded .lg-v3-children, body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-active:not(.is-expanded) .lg-v3-children { background: none !important; border: 0 !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; margin-left: 0 !important; padding: 0 8px 0 2px !important; height: auto !important; } body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-expanded .lg-v3-children::after, body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-active:not(.is-expanded) .lg-v3-children::after { display: none !important; } /* Separador finito entre el grupo y sus pestanas: marca la division sin dibujar otra caja. */ body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-expanded .lg-v3-children, body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-active:not(.is-single):not(.is-expanded) .lg-v3-children { border-left: 1px solid rgba(140, 175, 225, .3) !important; margin-left: 6px !important; padding-left: 8px !important; } /* Ancho: sin cuello ni capsula sobra espacio, asi que el grupo activo cerrado ocupa bastante menos. */ body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-active:not(.is-expanded), body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-active.is-hover:not(.is-expanded) { min-width: 168px !important; max-width: 168px !important; } body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-active:not(.is-single):not(.is-expanded) .lg-v3-children { width: 68px !important; max-width: 68px !important; } /* ---- PROPORCIONES DEL GRUPO ACTIVO CERRADO ---- El chip desbordaba su hueco y por eso tocaba los bordes del vidrio: la burbuja media 168 (boton 92 + hueco 76), pero al hueco habia que descontarle 16 de relleno, con lo que quedaban 60 utiles para un chip declarado en 68. Ocho pixeles de mas, invisibles en el codigo porque los numeros venian de capas distintas. Cuentas explicitas ahora: boton 92 hueco 82 (chip 66 + 14 de relleno + 2 de separador) total 174 + 4 de holgura = 178 de burbuja El chip queda centrado y con aire por los cuatro lados. */ body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-active:not(.is-expanded), body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-active.is-hover:not(.is-expanded) { min-width: 178px !important; max-width: 178px !important; } body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-active:not(.is-single):not(.is-expanded) .lg-v3-children { width: 82px !important; max-width: 82px !important; min-width: 82px !important; flex: 0 0 82px !important; margin-left: 0 !important; padding: 0 7px !important; border-left: 1px solid rgba(140, 175, 225, .28) !important; align-items: center !important; justify-content: center !important; } body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-active:not(.is-single):not(.is-expanded) .lg-v3-child.is-active { flex: 0 0 66px !important; width: 66px !important; height: 54px !important; border-radius: 16px !important; padding: 4px 3px !important; margin: 0 !important; } /* En el desplegado, mismo criterio: las sub-fichas no deben rozar el borde del vidrio que las contiene. */ body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-expanded .lg-v3-children { padding: 0 9px 0 9px !important; border-left: 1px solid rgba(140, 175, 225, .28) !important; margin-left: 0 !important; align-items: center !important; } body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-expanded .lg-v3-child { margin: 0 !important; } /* ---- EL RECUADRO INTERNO Y LA FRANJA DE COLOR ---- El boton del grupo seguia pintando fondo y borde propios: una regla anterior lo hacia con 5 clases de especificidad (.lg-v3-bubble.is-active:not(.is-single):not(.is-expanded) .lg-v3-main) y la que lo volvia transparente tenia solo 4, asi que perdia. Por eso se veia una caja dentro de otra, con su borde y su tinte — que es la franja rara entre la categoria y el chip. Aca se iguala la especificidad y, al ir despues, gana: el boton pasa a ser SOLO contenido sobre el vidrio de la burbuja. */ body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-active:not(.is-single):not(.is-expanded) .lg-v3-main, body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-active:not(.is-single).is-hover:not(.is-expanded) .lg-v3-main, body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-expanded:not(.is-single) .lg-v3-main { background: none !important; background-color: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } /* El separador tambien sumaba linea: entre el borde del boton y este quedaban dos rayas juntas. Sin borde propio del boton, alcanza con el espacio para separar. */ body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-expanded .lg-v3-children, body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-active:not(.is-single):not(.is-expanded) .lg-v3-children { border-left: 0 !important; } /* El reflejo superior se recortaba en curva y dibujaba otro contorno dentro del vidrio. Se deja recto y muy tenue: brillo, no forma. */ body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-expanded::before, body.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.is-active:not(.is-single):not(.is-expanded)::before { inset: 2px 3px auto 3px !important; height: 30% !important; border-radius: 22px 22px 0 0 !important; background: linear-gradient(180deg, rgba(255, 255, 255, .72), rgba(255, 255, 255, 0)) !important; opacity: .6 !important; } /* ============================================================ QUIEN PINTA VIDRIO: DECISION UNICA Y FINAL ------------------------------------------------------------ Este archivo acumulo muchas capas y varias se pisan entre si. Las que pintaban la capsula y el boton del grupo llegaban a pesar 9 clases, y cada intento de apagarlas pesaba menos, asi que la sombra rectangular detras del chip volvia a aparecer. Estas reglas repiten clases en el selector a proposito para superar ese peso. No cambia QUE seleccionan (un elemento tiene la clase una sola vez): solo garantizan que este bloque mande. La regla del diseno es simple: - la BURBUJA pone el vidrio - el boton del grupo y la capsula no pintan NADA - las SUB-FICHAS si, porque son las que se tocan ============================================================ */ body.liquid-glass-preview.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.lg-v3-bubble.lg-v3-bubble.lg-v3-bubble.lg-v3-bubble.lg-v3-bubble .lg-v3-main, body.liquid-glass-preview.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.lg-v3-bubble.lg-v3-bubble.lg-v3-bubble.lg-v3-bubble.lg-v3-bubble .lg-v3-children { background: none !important; background-color: transparent !important; background-image: none !important; border: 0 !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } body.liquid-glass-preview.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.lg-v3-bubble.lg-v3-bubble.lg-v3-bubble.lg-v3-bubble.lg-v3-bubble .lg-v3-main::before, body.liquid-glass-preview.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.lg-v3-bubble.lg-v3-bubble.lg-v3-bubble.lg-v3-bubble.lg-v3-bubble .lg-v3-main::after, body.liquid-glass-preview.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.lg-v3-bubble.lg-v3-bubble.lg-v3-bubble.lg-v3-bubble.lg-v3-bubble .lg-v3-children::before, body.liquid-glass-preview.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.lg-v3-bubble.lg-v3-bubble.lg-v3-bubble.lg-v3-bubble.lg-v3-bubble .lg-v3-children::after { content: none !important; display: none !important; background: none !important; box-shadow: none !important; } /* Con el grupo cerrado solo se ve la pestana elegida. */ body.liquid-glass-preview.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.lg-v3-bubble.lg-v3-bubble.lg-v3-bubble.lg-v3-bubble.lg-v3-bubble.is-active:not(.is-expanded) .lg-v3-child:not(.is-active) { display: none !important; } /* ---- EL TRAZO IRIDISCENTE TAMBIEN AL DESPLEGARSE ---- Se apagaba en .is-expanded::after por una razon que ya no corre: en aquel momento la burbuja desplegada se volvia transparente (pasaba a ser contenedor) y un anillo alrededor de la nada no tenia sentido. Con el rediseno a una sola pieza la burbuja vuelve a pintar vidrio, asi que el trazo le corresponde igual que cerrada — y es justo lo que se perdia al abrir. Se redeclara entero (no solo display) porque hay que reponer la mascara y anular la geometria heredada del viejo conector gooey, que vive en este mismo pseudo-elemento. */ body.liquid-glass-preview.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.lg-v3-bubble.lg-v3-bubble.lg-v3-bubble.lg-v3-bubble.lg-v3-bubble.is-expanded::after, body.liquid-glass-preview.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.lg-v3-bubble.lg-v3-bubble.lg-v3-bubble.lg-v3-bubble.lg-v3-bubble.is-active:not(.is-expanded)::after { content: "" !important; display: block !important; position: absolute !important; inset: 0 !important; width: auto !important; height: auto !important; min-width: 0 !important; max-width: none !important; transform: none !important; border: 0 !important; border-radius: inherit !important; padding: 1.5px !important; background: var(--v4-irid) !important; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important; -webkit-mask-composite: xor !important; mask-composite: exclude !important; opacity: .6 !important; box-shadow: none !important; animation: none !important; pointer-events: none !important; /* Debajo de las sub-fichas (z-index 2): si quedara encima, al ampliarse con la lupa el canto del anillo las cruzaba y se veia como una linea cortandolas. */ z-index: 1 !important; } body.liquid-glass-preview.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.lg-v3-bubble.lg-v3-bubble.lg-v3-bubble.lg-v3-bubble.lg-v3-bubble.is-expanded.is-hover::after { opacity: .95 !important; } /* ============================================================ LA SOMBRA CORTADA AL AMPLIAR ------------------------------------------------------------ El rail recorta si o si en vertical: lleva overflow-x: auto para el scroll horizontal, y un contenedor scrollable recorta tambien el otro eje (declarar overflow-y: visible no sirve, el navegador lo computa como auto). Con 14px de espacio abajo y una sombra de hover que se extendia ~54px (0 26px 46px -18px), el degradado se cortaba de golpe contra ese borde: eso era la linea recta bajo la ficha ampliada. Se ajustan LAS DOS variables para que encajen entre si: espacio del rail 18px arriba / 18px abajo alcance de sombra hasta 16px Asi la sombra termina de desvanecerse ANTES del recorte y no se ve ningun canto. La barra crece 6px, nada mas. ============================================================ */ body.liquid-glass-preview.liquid-glass-preview.liquid-glass-preview .lg-v3-rail.lg-v3-rail { padding: 18px 12px !important; align-items: center !important; } /* Sub-ficha en reposo. */ body.liquid-glass-preview.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.lg-v3-bubble.lg-v3-bubble.lg-v3-bubble.lg-v3-bubble.lg-v3-bubble .lg-v3-child { box-shadow: inset 0 2px 1px #fff, inset 0 -6px 10px -5px var(--v4-shade), 0 3px 8px -4px rgba(95, 115, 155, .3), 0 7px 14px -9px rgba(95, 115, 155, .26) !important; } /* Ampliada por la lupa: mas presencia, pero dentro del limite. El desplazamiento (7px) mas el difuminado (14) menos la contraccion (-6) da 15px de alcance real, bajo los 18 de aire. */ body.liquid-glass-preview.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.lg-v3-bubble.lg-v3-bubble.lg-v3-bubble.lg-v3-bubble.lg-v3-bubble .lg-v3-child:hover { box-shadow: inset 0 2px 1px #fff, inset 0 -6px 10px -5px var(--v4-shade), 0 5px 12px -5px rgba(95, 115, 155, .4), 0 7px 14px -6px rgba(95, 115, 155, .34) !important; } /* La pestana elegida, con su azul, bajo el mismo limite. */ body.liquid-glass-preview.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.lg-v3-bubble.lg-v3-bubble.lg-v3-bubble.lg-v3-bubble.lg-v3-bubble .lg-v3-child.is-active { box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .9), inset 0 -7px 12px -6px color-mix(in srgb, var(--v4-accent) 55%, black 15%), 0 4px 10px -4px color-mix(in srgb, var(--v4-accent) 50%, transparent), 0 8px 15px -7px color-mix(in srgb, var(--v4-accent) 40%, transparent) !important; } /* ---- MARGEN LATERAL PARA LA LUPA ---- Al ampliarse, cada sub-ficha crece desde su centro: 72px de ancho por 34% da ~12px hacia cada lado. Con 9px de margen interno, la PRIMERA y la ULTIMA se pasaban del borde del vidrio (las del medio no, porque crecen sobre sus vecinas). Con 13px entran las dos. El ancho reservado por el JS (122 + 82 por pestana) ya tiene holgura para absorberlo. */ body.liquid-glass-preview.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.lg-v3-bubble.lg-v3-bubble.lg-v3-bubble.lg-v3-bubble.lg-v3-bubble .lg-v3-children { padding-left: 13px !important; padding-right: 13px !important; } /* La ficha ampliada, por encima de sus vecinas y del trazo. */ body.liquid-glass-preview.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.lg-v3-bubble.lg-v3-bubble.lg-v3-bubble.lg-v3-bubble.lg-v3-bubble .lg-v3-child:hover { z-index: 6 !important; } /* ---- LA SOMBRA CORTADA EN LAS ESQUINAS ---- La capsula de hijos recorta en horizontal (overflow-x: clip) porque lo necesita para animar su ancho al desplegarse. Pero ese recorte tambien corta la SOMBRA de la ficha que la lupa agranda, y como el corte es una linea recta mientras la sombra es un degradado redondo, se nota justo en las esquinas donde empieza y donde termina. El recorte solo hace falta MIENTRAS la capsula se abre. El JS marca .lg-abierta al terminar esa animacion (y la saca al plegar), asi que desde ese momento se deja de recortar y la sombra se dibuja entera. En el grupo cerrado con su pestana elegida no hay animacion de ancho en curso, asi que ahi tampoco se recorta nunca. */ body.liquid-glass-preview.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.lg-v3-bubble.lg-v3-bubble.lg-v3-bubble.lg-v3-bubble.lg-v3-bubble.lg-abierta .lg-v3-children, body.liquid-glass-preview.liquid-glass-preview.liquid-glass-preview .lg-v3-bubble.lg-v3-bubble.lg-v3-bubble.lg-v3-bubble.lg-v3-bubble.lg-v3-bubble.is-active:not(.is-expanded) .lg-v3-children { overflow: visible !important; overflow-x: visible !important; overflow-y: visible !important; } /* ====================================================================== NUEVA VENTA · LIQUID GLASS REAL Esta regla vive en el tema que se carga al final. Sustituye la antigua exclusión visual de Ventas sin aplicar blur a cada nodo del formulario. ====================================================================== */ body.liquid-glass-preview.liquid-glass-preview #view-venta { --sale-lg-ink: #10234d; --sale-lg-stroke: rgba(255,255,255,.9); padding: 20px !important; border: 1px solid rgba(218,226,238,.62) !important; border-radius: 36px !important; background: rgba(247,249,252,.34) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 28px 72px -60px rgba(30,42,68,.42) !important; isolation: isolate !important; overflow: visible !important; } body.liquid-glass-preview.liquid-glass-preview #view-venta::before { content:"" !important; position:absolute !important; inset:0 !important; z-index:-1 !important; border-radius:inherit !important; background: linear-gradient(112deg, transparent 12%, rgba(255,255,255,.36) 34%, transparent 53%) !important; pointer-events:none !important; } body.liquid-glass-preview.liquid-glass-preview #view-venta > div:first-child, body.liquid-glass-preview.liquid-glass-preview #view-venta #card-trabajo.pos-card-mostrador-premium, body.liquid-glass-preview.liquid-glass-preview #view-venta #sales-panel-right.pos-card-mostrador-premium { border: 1px solid var(--sale-lg-stroke) !important; background: radial-gradient(120% 70% at 8% 0%, rgba(255,255,255,.92), transparent 44%), linear-gradient(145deg, rgba(255,255,255,.68), rgba(239,243,249,.46)) !important; -webkit-backdrop-filter: blur(26px) saturate(112%) !important; backdrop-filter: blur(26px) saturate(112%) !important; box-shadow: inset 0 1.5px 0 rgba(255,255,255,.98), inset 0 -1px 0 rgba(198,208,222,.34), 0 28px 65px -44px rgba(29,43,70,.38) !important; } body.liquid-glass-preview.liquid-glass-preview #view-venta > div:first-child { min-height: 72px !important; padding: 11px 14px 11px 18px !important; border-radius: 26px !important; position: relative !important; z-index: 5000 !important; overflow: visible !important; } body.liquid-glass-preview.liquid-glass-preview #view-venta #card-trabajo.pos-card-mostrador-premium, body.liquid-glass-preview.liquid-glass-preview #view-venta #sales-panel-right.pos-card-mostrador-premium { border-radius: 30px !important; } body.liquid-glass-preview.liquid-glass-preview #view-venta #card-trabajo.pos-card-mostrador-premium::after, body.liquid-glass-preview.liquid-glass-preview #view-venta #sales-panel-right.pos-card-mostrador-premium::after { content:"" !important; position:absolute !important; inset:0 !important; border-radius:inherit !important; pointer-events:none !important; background: linear-gradient(112deg, rgba(255,255,255,.48), transparent 24%), linear-gradient(90deg, transparent, rgba(255,255,255,.96) 48%, transparent) top/100% 2px no-repeat !important; mix-blend-mode:screen !important; opacity:.9 !important; } body.liquid-glass-preview.liquid-glass-preview #view-venta #card-buscar-deuda input, body.liquid-glass-preview.liquid-glass-preview #view-venta #btn-toggle-opciones-venta, body.liquid-glass-preview.liquid-glass-preview #view-venta #vendedor-bubble, body.liquid-glass-preview.liquid-glass-preview #view-venta .input-premium-smart, body.liquid-glass-preview.liquid-glass-preview #view-venta .pos-input, body.liquid-glass-preview.liquid-glass-preview #view-venta #pago-selector-btn, body.liquid-glass-preview.liquid-glass-preview #view-venta #monto { border: 1px solid rgba(255,255,255,.78) !important; background: linear-gradient(145deg,rgba(255,255,255,.74),rgba(239,243,248,.48)) !important; color: var(--sale-lg-ink) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.94), 0 12px 28px -25px rgba(34,68,140,.65) !important; } body.liquid-glass-preview.liquid-glass-preview #view-venta #card-buscar-deuda { flex: 1 1 420px !important; width: min(100%, 560px) !important; max-width: 560px !important; } body.liquid-glass-preview.liquid-glass-preview #view-venta #card-buscar-deuda > .material-symbols-outlined { left: 18px !important; color: #2677cf !important; font-size: 1.35rem !important; } body.liquid-glass-preview.liquid-glass-preview #view-venta #card-buscar-deuda #buscar-deuda-factura { height: 52px !important; padding: 0 20px 0 52px !important; border: 1px solid rgba(181,194,213,.72) !important; border-radius: 18px !important; background: rgba(255,255,255,.8) !important; color: #16233d !important; font-size: .96rem !important; font-weight: 650 !important; letter-spacing: -.01em !important; -webkit-backdrop-filter: blur(18px) saturate(110%) !important; backdrop-filter: blur(18px) saturate(110%) !important; box-shadow: inset 0 1px 0 #fff, 0 12px 26px -22px rgba(25,43,75,.5) !important; } body.liquid-glass-preview.liquid-glass-preview #view-venta #card-buscar-deuda #buscar-deuda-factura::placeholder { color: #7b879b !important; opacity: 1 !important; font-weight: 600 !important; } body.liquid-glass-preview.liquid-glass-preview #view-venta .input-premium-smart:focus, body.liquid-glass-preview.liquid-glass-preview #view-venta .pos-input:focus, body.liquid-glass-preview.liquid-glass-preview #view-venta #card-buscar-deuda input:focus { border-color: rgba(36,137,246,.62) !important; background: rgba(255,255,255,.72) !important; box-shadow: 0 0 0 4px rgba(45,137,246,.11), inset 0 1px 0 #fff !important; } body.liquid-glass-preview.liquid-glass-preview #view-venta #payment-panel-container, body.liquid-glass-preview.liquid-glass-preview #view-venta #cart-empty-state, body.liquid-glass-preview.liquid-glass-preview #view-venta #contenedor-productos-venta { border:1px solid rgba(255,255,255,.64) !important; background:linear-gradient(145deg,rgba(255,255,255,.52),rgba(239,243,248,.3)) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.8) !important; } body.liquid-glass-preview.liquid-glass-preview #view-venta #payment-panel-container { border-radius:24px !important; padding:22px !important; } body.liquid-glass-preview.liquid-glass-preview #view-venta #cart-empty-state { border-radius:24px !important; border-style:dashed !important; } body.liquid-glass-preview.liquid-glass-preview #view-venta #btn-guardar { background:linear-gradient(105deg,#119ce9,#536df4 54%,#8742ed) !important; border:1px solid rgba(255,255,255,.52) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.48),0 20px 38px -22px rgba(79,65,220,.86) !important; } body.liquid-glass-preview.liquid-glass-preview #view-venta #btn-toggle-opciones-venta, body.liquid-glass-preview.liquid-glass-preview #view-venta #vendedor-bubble, body.liquid-glass-preview.liquid-glass-preview #view-venta #pago-selector-btn, body.liquid-glass-preview.liquid-glass-preview #view-venta #container-toggle-fe, body.liquid-glass-preview.liquid-glass-preview #view-venta #btn-abrir-gasto, body.liquid-glass-preview.liquid-glass-preview #view-venta #btn-clean-prod { -webkit-backdrop-filter: blur(18px) saturate(115%) !important; backdrop-filter: blur(18px) saturate(115%) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.96), 0 12px 26px -20px rgba(29,43,70,.48) !important; } body.liquid-glass-preview.liquid-glass-preview #view-venta #btn-toggle-menu-prods, body.liquid-glass-preview.liquid-glass-preview #view-venta #btn-add-canasta, body.liquid-glass-preview.liquid-glass-preview #view-venta #btn-guardar { position: relative !important; overflow: hidden !important; border-color: rgba(255,255,255,.68) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.6), inset 0 -1px 0 rgba(0,0,0,.08), 0 16px 30px -20px currentColor !important; } body.liquid-glass-preview.liquid-glass-preview #view-venta #btn-toggle-menu-prods::after, body.liquid-glass-preview.liquid-glass-preview #view-venta #btn-add-canasta::after, body.liquid-glass-preview.liquid-glass-preview #view-venta #btn-guardar::after { content:"" !important; position:absolute !important; inset:1px 8% auto !important; height:42% !important; border-radius:999px !important; background:linear-gradient(180deg,rgba(255,255,255,.48),transparent) !important; pointer-events:none !important; } body.liquid-glass-preview.liquid-glass-preview #view-venta .pos-header-productos-wrap { display: flex !important; align-items: center !important; justify-content: space-between !important; margin-bottom: 18px !important; padding: 0 !important; border: none !important; } body.liquid-glass-preview.liquid-glass-preview #view-venta .pos-header-productos-wrap .pos-header-label { display: inline-flex !important; align-items: center !important; gap: 10px !important; padding: 6px 16px 6px 8px !important; border-radius: 999px !important; background: rgba(238, 246, 255, 0.8) !important; border: 1px solid rgba(191, 219, 254, 0.7) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 4px 12px -4px rgba(30, 58, 138, 0.08) !important; color: #1e3a8a !important; font-size: 0.78rem !important; font-weight: 900 !important; letter-spacing: 0.04em !important; text-transform: uppercase !important; margin: 0 !important; } body.liquid-glass-preview.liquid-glass-preview #view-venta .pos-header-icon-badge { width: 26px !important; height: 26px !important; border-radius: 8px !important; background: #3b82f6 !important; color: #ffffff !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; box-shadow: 0 2px 6px rgba(59, 130, 246, 0.35) !important; } body.liquid-glass-preview.liquid-glass-preview #view-venta .pos-header-icon-badge .material-symbols-outlined { font-size: 16px !important; color: #ffffff !important; } body.liquid-glass-preview.liquid-glass-preview #view-venta .pos-clean-prod-btn { width: 36px !important; height: 36px !important; border-radius: 12px !important; background: rgba(255, 255, 255, 0.75) !important; border: 1px solid rgba(226, 232, 240, 0.85) !important; color: #64748b !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; transition: all 0.2s ease !important; box-shadow: inset 0 1px 0 #fff, 0 4px 10px -4px rgba(0,0,0,0.06) !important; } body.liquid-glass-preview.liquid-glass-preview #view-venta .pos-clean-prod-btn:hover { color: #ef4444 !important; background: #fef2f2 !important; border-color: #fecaca !important; } body.liquid-glass-preview.liquid-glass-preview #view-venta .sale-product-search-row { display: flex !important; align-items: center !important; gap: 12px !important; margin-bottom: 16px !important; } body.liquid-glass-preview.liquid-glass-preview #view-venta .sale-product-search-input-wrap { flex: 1 1 auto !important; position: relative !important; display: flex !important; align-items: center !important; } body.liquid-glass-preview.liquid-glass-preview #view-venta #venta-buscar-producto { width: 100% !important; height: 48px !important; padding: 0 16px 0 44px !important; border-radius: 14px !important; font-size: 0.88rem !important; font-weight: 550 !important; } body.liquid-glass-preview.liquid-glass-preview #view-venta .sale-search-icon { position: absolute !important; left: 14px !important; color: #64748b !important; font-size: 20px !important; pointer-events: none !important; } body.liquid-glass-preview.liquid-glass-preview #view-venta .sale-product-action-wrap { position: relative !important; flex: 0 0 auto !important; z-index: 100 !important; } body.liquid-glass-preview.liquid-glass-preview #view-venta .sale-product-action { width: auto !important; min-width: 92px !important; height: 48px !important; padding: 0 16px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 7px !important; border-radius: 14px !important; font-size: .78rem !important; font-weight: 800 !important; white-space: nowrap !important; cursor: pointer !important; } body.liquid-glass-preview.liquid-glass-preview #view-venta #btn-new-producto { color: #40506a !important; border: 1px solid rgba(174,188,207,.66) !important; background: linear-gradient(145deg,rgba(255,255,255,.86),rgba(237,242,248,.64)) !important; box-shadow: inset 0 1px 0 #fff, 0 10px 22px -20px rgba(25,43,75,.5) !important; } body.liquid-glass-preview.liquid-glass-preview #view-venta #btn-toggle-menu-prods.sale-product-action-catalog { min-width: 115px !important; color: #176bc1 !important; border: 1px solid rgba(81,151,225,.4) !important; background: linear-gradient(145deg,rgba(238,248,255,.9),rgba(215,234,252,.7)) !important; box-shadow: inset 0 1px 0 #fff, 0 12px 24px -20px rgba(23,107,193,.7) !important; } body.liquid-glass-preview.liquid-glass-preview #view-venta .sale-product-selected-section { display: flex !important; flex-direction: column !important; gap: 6px !important; margin-bottom: 16px !important; } body.liquid-glass-preview.liquid-glass-preview #view-venta .sale-section-label { font-size: 0.72rem !important; font-weight: 750 !important; color: #64748b !important; text-transform: uppercase !important; letter-spacing: 0.04em !important; margin: 0 !important; } body.liquid-glass-preview.liquid-glass-preview #view-venta .sale-product-selected-row { display: flex !important; align-items: center !important; gap: 10px !important; } body.liquid-glass-preview.liquid-glass-preview #view-venta #visual-preview-producto { width: 48px !important; height: 48px !important; flex: 0 0 48px !important; border-radius: 14px !important; background: linear-gradient(145deg, #eff6ff, #dbeafe) !important; border: 1px solid rgba(191, 219, 254, 0.8) !important; display: flex !important; align-items: center !important; justify-content: center !important; color: #2563eb !important; box-shadow: inset 0 1px 0 #fff, 0 2px 8px rgba(37, 99, 235, 0.1) !important; overflow: hidden !important; } body.liquid-glass-preview.liquid-glass-preview #view-venta #visual-preview-producto img { width: 100% !important; height: 100% !important; object-fit: cover !important; border-radius: inherit !important; } body.liquid-glass-preview.liquid-glass-preview #view-venta .sale-preview-placeholder { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 100% !important; } body.liquid-glass-preview.liquid-glass-preview #view-venta .sale-preview-placeholder .material-symbols-outlined { font-size: 24px !important; color: #3b82f6 !important; } body.liquid-glass-preview.liquid-glass-preview #view-venta .sale-product-input-wrap { flex: 1 1 auto !important; position: relative !important; display: flex !important; align-items: center !important; } body.liquid-glass-preview.liquid-glass-preview #view-venta #desc-manual { width: 100% !important; height: 48px !important; padding: 0 40px 0 16px !important; border-radius: 14px !important; font-size: 0.9rem !important; font-weight: 600 !important; } body.liquid-glass-preview.liquid-glass-preview #view-venta .sale-chevron-icon { position: absolute !important; right: 14px !important; color: #94a3b8 !important; font-size: 22px !important; pointer-events: none !important; } body.liquid-glass-preview.liquid-glass-preview #view-venta .sale-product-price-row { display: flex !important; align-items: flex-end !important; gap: 12px !important; margin-bottom: 20px !important; } body.liquid-glass-preview.liquid-glass-preview #view-venta .sale-product-cant-group { flex: 0 0 auto !important; display: flex !important; flex-direction: column !important; gap: 6px !important; } body.liquid-glass-preview.liquid-glass-preview #view-venta .sale-quantity-stepper { display: inline-flex !important; align-items: center !important; height: 48px !important; padding: 4px !important; border-radius: 14px !important; background: rgba(255, 255, 255, 0.85) !important; border: 1px solid rgba(203, 213, 225, 0.8) !important; box-shadow: inset 0 1px 0 #fff, 0 2px 6px rgba(0, 0, 0, 0.04) !important; } body.liquid-glass-preview.liquid-glass-preview #view-venta .sale-quantity-stepper button { width: 38px !important; height: 38px !important; border-radius: 10px !important; border: none !important; background: rgba(241, 245, 249, 0.9) !important; color: #1e293b !important; font-size: 1.1rem !important; font-weight: 700 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; transition: all 0.15s ease !important; } body.liquid-glass-preview.liquid-glass-preview #view-venta .sale-quantity-stepper button:hover { background: #e2e8f0 !important; color: #0f172a !important; } body.liquid-glass-preview.liquid-glass-preview #view-venta .sale-quantity-stepper #cantidad-producto { width: 44px !important; height: 38px !important; border: none !important; background: transparent !important; text-align: center !important; font-size: 1rem !important; font-weight: 800 !important; color: #0f172a !important; padding: 0 !important; box-shadow: none !important; -moz-appearance: textfield !important; } body.liquid-glass-preview.liquid-glass-preview #view-venta .sale-product-price-group { flex: 1 1 auto !important; display: flex !important; flex-direction: column !important; gap: 6px !important; } body.liquid-glass-preview.liquid-glass-preview #view-venta .sale-product-price-input-wrap { position: relative !important; display: flex !important; align-items: center !important; } body.liquid-glass-preview.liquid-glass-preview #view-venta .sale-currency-symbol { position: absolute !important; left: 14px !important; font-size: 1.15rem !important; font-weight: 900 !important; color: #10b981 !important; pointer-events: none !important; } body.liquid-glass-preview.liquid-glass-preview #view-venta #precio-unitario { width: 100% !important; height: 48px !important; padding: 0 16px 0 34px !important; border-radius: 14px !important; font-size: 1.1rem !important; font-weight: 800 !important; color: #0f172a !important; letter-spacing: -0.01em !important; } body.liquid-glass-preview.liquid-glass-preview #view-venta #btn-add-canasta { width: auto !important; min-width: 140px !important; height: 48px !important; padding: 0 24px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; border-radius: 14px !important; font-size: .88rem !important; font-weight: 850 !important; white-space: nowrap !important; cursor: pointer !important; background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important; border: 1px solid rgba(255, 255, 255, 0.4) !important; color: #ffffff !important; box-shadow: 0 8px 20px -4px rgba(16, 185, 129, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.5) !important; transition: all 0.2s ease !important; } body.liquid-glass-preview.liquid-glass-preview #view-venta #btn-add-canasta:hover { transform: translateY(-2px) !important; box-shadow: 0 12px 24px -4px rgba(16, 185, 129, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.6) !important; } body.liquid-glass-preview.liquid-glass-preview #view-venta #cart-empty-state { padding: 44px 20px !important; border-radius: 20px !important; border: 1.5px dashed rgba(191, 219, 254, 0.85) !important; background: rgba(248, 250, 252, 0.55) !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; text-align: center !important; gap: 6px !important; margin-top: 4px !important; } body.liquid-glass-preview.liquid-glass-preview #view-venta .cart-empty-icon-circle { width: 54px !important; height: 54px !important; border-radius: 50% !important; background: rgba(224, 242, 254, 0.75) !important; border: 1px solid rgba(186, 230, 253, 0.85) !important; display: flex !important; align-items: center !important; justify-content: center !important; color: #0284c7 !important; margin-bottom: 6px !important; } body.liquid-glass-preview.liquid-glass-preview #view-venta .cart-empty-icon-circle span { font-size: 26px !important; } body.liquid-glass-preview.liquid-glass-preview #view-venta #cart-empty-state p { margin: 0 !important; font-size: 0.95rem !important; font-weight: 800 !important; color: #334155 !important; } body.liquid-glass-preview.liquid-glass-preview #view-venta #cart-empty-state span { font-size: 0.8rem !important; color: #94a3b8 !important; font-weight: 500 !important; } @media (max-width: 1100px) { body.liquid-glass-preview.liquid-glass-preview #view-venta .sale-product-action { min-width: 44px !important; width: 44px !important; padding: 0 !important; } body.liquid-glass-preview.liquid-glass-preview #view-venta .sale-product-action > span:last-child { display: none !important; } body.liquid-glass-preview.liquid-glass-preview #view-venta #btn-add-canasta { min-width: 120px !important; padding: 0 14px !important; } } /* El guardado global tambien usa ::after para un spinner. En Ventas no se mezcla con el reflejo del boton: el estado se comunica bloqueando el boton. */ body.liquid-glass-preview.liquid-glass-preview #view-venta #btn-guardar.btn-loading { color: #fff !important; opacity: .72 !important; cursor: wait !important; filter: saturate(.82) !important; } body.liquid-glass-preview.liquid-glass-preview #view-venta #btn-guardar.btn-loading::after { content: none !important; display: none !important; animation: none !important; } body.liquid-glass-preview.liquid-glass-preview #view-venta #menu-opciones-venta, body.liquid-glass-preview.liquid-glass-preview #view-venta #venta-resultados-busqueda, body.liquid-glass-preview.liquid-glass-preview #view-venta #dropdown-menu-productos { background:rgba(248,250,253,.88) !important; border:1px solid rgba(255,255,255,.9) !important; -webkit-backdrop-filter:blur(28px) saturate(112%) !important; backdrop-filter:blur(28px) saturate(112%) !important; } body.liquid-glass-preview.liquid-glass-preview #view-venta #menu-opciones-venta { z-index: 99999 !important; min-width: 270px !important; padding: 7px !important; border-radius: 18px !important; overflow: visible !important; box-shadow: inset 0 1px 0 #fff, 0 22px 44px -24px rgba(20,34,60,.5) !important; } body.liquid-glass-preview.liquid-glass-preview #view-venta #menu-opciones-venta > button { border-radius: 12px !important; } body.liquid-glass-preview.liquid-glass-preview #view-venta #menu-opciones-venta > button.is-active { color: #176dc2 !important; background: rgba(218,237,255,.72) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.9) !important; } body.liquid-glass-preview.liquid-glass-lite #view-venta > div:first-child, body.liquid-glass-preview.liquid-glass-lite #view-venta #card-trabajo.pos-card-mostrador-premium, body.liquid-glass-preview.liquid-glass-lite #view-venta #sales-panel-right.pos-card-mostrador-premium { -webkit-backdrop-filter:none !important; backdrop-filter:none !important; background:linear-gradient(145deg,rgba(255,255,255,.94),rgba(239,243,248,.84)) !important; } @media (max-width:768px) { body.liquid-glass-preview.liquid-glass-preview #view-venta { padding:10px !important; border-radius:25px !important; } body.liquid-glass-preview.liquid-glass-preview #view-venta #card-trabajo.pos-card-mostrador-premium, body.liquid-glass-preview.liquid-glass-preview #view-venta #sales-panel-right.pos-card-mostrador-premium { border-radius:24px !important; } }