/* ════════════════════════════════════════════════════════════════════ digitalVCard — Tooltips Liquid Glass Reemplazo del tooltip nativo del SO. Tokens propios --dvct-*, light/dark vía [data-theme] en . Posicionamiento por JS. ════════════════════════════════════════════════════════════════════ */ :root { --dvct-ease-spring: cubic-bezier(0.32, 0.72, 0, 1); --dvct-ease-out: cubic-bezier(0.2, 0.7, 0.3, 1); --dvct-bg: rgba(28, 25, 65, 0.92); --dvct-border: rgba(255, 255, 255, 0.16); --dvct-text: #ffffff; --dvct-shadow: 0 10px 28px rgba(0, 0, 0, 0.42); } [data-theme="light"] { --dvct-bg: rgba(28, 28, 30, 0.92); --dvct-border: rgba(255, 255, 255, 0.10); --dvct-text: #ffffff; --dvct-shadow: 0 10px 28px rgba(0, 0, 0, 0.18); } .dvch-tip { position: fixed; top: -9999px; left: -9999px; /* Por encima de cualquier modal: el modal de perfil cliente está en z-index: 10100, modales custom (dvc-modal-overlay) suelen 9000-10000. Subimos a 11000 para garantizar que el tooltip se vea por encima. */ z-index: 11000; pointer-events: none; max-width: 280px; padding: 0.45rem 0.7rem; background: var(--dvct-bg); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); border: 1px solid var(--dvct-border); border-radius: 10px; box-shadow: var(--dvct-shadow); color: var(--dvct-text); font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif; font-size: 0.78rem; font-weight: 500; line-height: 1.4; letter-spacing: -0.005em; white-space: normal; text-align: center; opacity: 0; transform: translateY(4px) scale(0.96); transform-origin: center top; transition: opacity 160ms var(--dvct-ease-out), transform 240ms var(--dvct-ease-spring); will-change: opacity, transform; } .dvch-tip.is-shown { opacity: 1; transform: translateY(0) scale(1); } /* Variante por posición para sutilmente acomodar el origen de la animación */ .dvch-tip[data-pos="top"] { transform-origin: center bottom; } .dvch-tip[data-pos="bottom"] { transform-origin: center top; } .dvch-tip[data-pos="left"] { transform-origin: right center; } .dvch-tip[data-pos="right"] { transform-origin: left center; } .dvch-tip[data-pos="top"]:not(.is-shown) { transform: translateY(4px) scale(0.96); } .dvch-tip[data-pos="bottom"]:not(.is-shown) { transform: translateY(-4px) scale(0.96); } .dvch-tip[data-pos="left"]:not(.is-shown) { transform: translateX(4px) scale(0.96); } .dvch-tip[data-pos="right"]:not(.is-shown) { transform: translateX(-4px) scale(0.96); }