/* Cursor Dot + Ring — anillo (contorno/relleno) + hotspot (punto preciso). */

body.pro-cursor-dot-ring .pe-cur-ring,
body.pro-cursor-dot-ring .pe-cur-hotspot {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 2147483646;
  border-radius: 50%;
  will-change: transform;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity .2s;
}

/* Solo visibles cuando el cursor está activo (mouse dentro del viewport). */
body.pro-cursor-visible .pe-cur-ring,
body.pro-cursor-visible .pe-cur-hotspot {
  opacity: 1;
}

/* Anillo: contorno por default. Las CSS vars se inyectan SIN unidad → calc(... * 1px). */
body.pro-cursor-dot-ring .pe-cur-ring {
  width: calc(var(--pe-cur-size, 40) * 1px);
  height: calc(var(--pe-cur-size, 40) * 1px);
  border: 1.6px solid var(--pe-cur-color, #C8FF3D);
  background: transparent;
}

/* Hotspot: punto sólido de 6px, color de acento en el centro hueco, 1:1 con el puntero. */
body.pro-cursor-dot-ring .pe-cur-hotspot {
  width: 6px;
  height: 6px;
  background: var(--pe-cur-color, #C8FF3D);
}

/* Modo relleno: anillo sólido del color de acento... */
body.pro-cursor-dot-ring.pro-cursor-fill .pe-cur-ring {
  background: var(--pe-cur-color, #C8FF3D);
}

/* ...y el punto pasa a un tono oscuro de contraste para no desaparecer sobre el disco. */
body.pro-cursor-dot-ring.pro-cursor-fill .pe-cur-hotspot {
  background: var(--pe-cur-dot-contrast, #0B0B0F);
}

/* Ocultar el puntero nativo del SO cuando el runtime lo pide. */
body.pro-cursor-hide-native,
body.pro-cursor-hide-native * {
  cursor: none;
}