/*
  Cursor con efecto de agua, compartido por toda la plataforma (webapp pública,
  dashboard, módulos y pantallas de acceso). Nunca oculta el cursor nativo del
  sistema operativo: agrega un halo + gota que lo acompañan, para no romper la
  precisión de clic en formularios ni la accesibilidad.

  Se apaga solo en pantallas táctiles (pointer: coarse) y cuando el usuario
  pidió menos movimiento (prefers-reduced-motion) — ver water-cursor.js.
*/

.aw-water-cursor-ring,
.aw-water-cursor-dot {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 2147483000;
  opacity: 0;
  will-change: transform, opacity, width, height;
}

.aw-water-cursor-ring.is-visible,
.aw-water-cursor-dot.is-visible {
  opacity: 1;
}

.aw-water-cursor-ring {
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border-radius: 50%;
  border: 1.5px solid var(--bda-accent, var(--aw-cyan, #67d8ff));
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 60%);
  transform: translate3d(var(--x, -100px), var(--y, -100px), 0);
  transition: width .18s ease, height .18s ease, border-color .18s ease, opacity .25s ease;
}

.aw-water-cursor-dot {
  width: 9px;
  height: 9px;
  margin: -5px 0 0 -6px;
  border-radius: 58% 58% 58% 4%;
  background: radial-gradient(circle at 32% 30%, #fff, var(--bda-primary, var(--aw-blue, #18b6e8)) 70%);
  box-shadow: 0 0 10px rgba(24, 182, 232, .55);
  transform: translate3d(var(--x, -100px), var(--y, -100px), 0) rotate(45deg);
  transition: width .15s ease, height .15s ease, opacity .25s ease;
}

body.aw-cursor-hover .aw-water-cursor-ring {
  width: 54px;
  height: 54px;
  margin: -27px 0 0 -27px;
  border-color: var(--bda-primary-2, var(--aw-blue-2, #2c7ef8));
}

body.aw-cursor-hover .aw-water-cursor-dot {
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -4px;
}

body.aw-cursor-pressed .aw-water-cursor-ring {
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
}

.aw-water-ripple {
  position: fixed;
  top: 0;
  left: 0;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border-radius: 50%;
  border: 2px solid var(--bda-primary, var(--aw-blue, #18b6e8));
  pointer-events: none;
  z-index: 2147483000;
  transform: translate3d(var(--x, 0), var(--y, 0), 0) scale(1);
  opacity: .85;
  animation: aw-water-ripple-pop .55s ease-out forwards;
}

@keyframes aw-water-ripple-pop {
  to {
    transform: translate3d(var(--x, 0), var(--y, 0), 0) scale(4.4);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .aw-water-ripple {
    animation: none;
    opacity: 0;
  }
}
