/* 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" (día abierto desde Historial) ---------- */ /* La cabecera ya es azul-violeta por diseño — le damos textura de vidrio (blur + reflejo interno) sin cambiarle el color de marca. */ body.liquid-glass-preview.liquid-glass-preview .modal-dia-header-premium { -webkit-backdrop-filter: blur(9px) saturate(115%) !important; backdrop-filter: blur(9px) saturate(115%) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 -20px 30px -25px rgba(0, 0, 0, .2) !important; } body.liquid-glass-preview.liquid-glass-preview .btn-header-dia { background: rgba(255, 255, 255, .16) !important; border: 1px solid rgba(255, 255, 255, .3) !important; -webkit-backdrop-filter: blur(6px) !important; backdrop-filter: blur(6px) !important; color: #fff !important; } body.liquid-glass-preview.liquid-glass-preview .btn-header-dia-primary { background: rgba(255, 255, 255, .92) !important; color: #2a3f9e !important; border: none !important; } /* Tarjetas de cada orden dentro del día (ORDEN #0957, etc.) — blanco limpio con buen contraste, SIN tinte azul (en la referencia son blancas, no celestes; el tinte que le puse antes se veía "sucio" en vez de bonito). */ body.liquid-glass-preview.liquid-glass-preview .venta-card { background: #ffffff !important; border: 1px solid #e2e8f0 !important; border-left: 3px solid #e2e8f0 !important; box-shadow: 0 6px 16px -10px rgba(15, 23, 42, .18) !important; transition: transform .25s ease, box-shadow .25s ease !important; } body.liquid-glass-preview.liquid-glass-preview .venta-card:hover { transform: translateY(-3px) !important; box-shadow: 0 12px 24px -12px rgba(15, 23, 42, .22) !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: 0 !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). */ @media (min-width: 769px) { body.liquid-glass-preview.liquid-glass-preview .main-nav:not(.lg-v3-ready) .nav-center { visibility: hidden !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: 0 !important; overflow: visible !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; } body.liquid-glass-preview.liquid-glass-preview .lg-v3-rail { position: relative !important; flex: 1 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: 430px !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, 432px) !important; max-width: var(--lg-v3-expanded-width, 432px) !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: 500px !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; } 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; } }