/* ═══════════════════════════════════════════════════════════════════════
   vz-tip — librería de tooltips (independiente, sin dependencias)
   Uso: cualquier elemento con data-tip="texto" muestra el tooltip al
   pasar el ratón (o al enfocar con teclado). Colores en variables.
   ═══════════════════════════════════════════════════════════════════════ */

.vz-tip {
    --tip-bg: #1d1d1f;
    --tip-ink: #ffffff;

    position: fixed;
    z-index: 200;
    max-width: 300px;
    background: var(--tip-bg);
    color: var(--tip-ink);
    font: 12px/1.55 'Inter', -apple-system, sans-serif;
    letter-spacing: 0.01em;
    padding: 10px 13px;
    border-radius: 10px;
    box-shadow: 0 10px 34px rgba(15, 20, 30, 0.28);
    pointer-events: none;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 160ms ease, transform 160ms ease;
}
.vz-tip.is-in { opacity: 1; transform: translateY(0); }

/* Flecha */
.vz-tip::after {
    content: "";
    position: absolute;
    left: var(--tip-arrow-x, 50%);
    margin-left: -6px;
    border: 6px solid transparent;
}
.vz-tip[data-place="top"]::after { top: 100%; border-top-color: var(--tip-bg); }
.vz-tip[data-place="bottom"]::after { bottom: 100%; border-bottom-color: var(--tip-bg); }
/* Modo «over»: centrado sobre la imagen del documento — sin flecha, con velo */
.vz-tip[data-place="over"]::after { display: none; }
.vz-tip[data-place="over"] {
    background: rgba(29, 29, 31, 0.92);
    backdrop-filter: blur(2px);
    text-align: center;
}

@media (prefers-reduced-motion: reduce) {
    .vz-tip { transition: none; }
}
/* En táctil no hay hover: el tooltip no aplica. */
@media (hover: none) {
    .vz-tip { display: none !important; }
}