/* =========================================================
   UFY PHONE — DESLIZAR PARA ACTUALIZAR
   El circulito que baja al tirar hacia abajo una lista que ya está arriba
   del todo (public/js/ufy-phone/ufy-pull-refresh.js y
   ufy-pull-refresh-indicator.js). El JS pone:
     --ufy-ptr-x, --ufy-ptr-top → el centro de arriba de la app abierta
     --ufy-ptr-pull             → cuánto bajó (px)
     --ufy-ptr-progress         → de 0 a 1: cuánto falta para la marca
     data-state                 → idle, pulling, armed (pasó la marca) o
                                  refreshing (actualizando)
   ========================================================= */

.ufy-ptr {
  position: fixed;
  top: var(--ufy-ptr-top, 0px);
  left: var(--ufy-ptr-x, 50%);
  z-index: 2147480000;

  width: 0;
  height: 0;

  pointer-events: none;
}


.ufy-ptr-badge {
  position: absolute;
  top: -46px;
  left: -19px;

  display: grid;
  place-items: center;

  width: 38px;
  height: 38px;

  border-radius: 50%;

  color: #17111f;
  background: #ffffff;

  box-shadow:
    0 4px 14px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(0, 0, 0, 0.06);

  opacity: 0;

  transform:
    translateY(var(--ufy-ptr-pull, 0px))
    rotate(calc(var(--ufy-ptr-progress, 0) * 270deg));

  transition:
    transform 240ms cubic-bezier(0.2, 0.8, 0.3, 1),
    opacity 180ms ease;
}


/* Mientras el dedo tira, el circulito lo sigue sin retraso. */
.ufy-ptr[data-state="pulling"] .ufy-ptr-badge,
.ufy-ptr[data-state="armed"] .ufy-ptr-badge {
  opacity: 1;

  transition: none;
}


.ufy-ptr[data-state="pulling"] .ufy-ptr-badge {
  opacity: calc(0.35 + var(--ufy-ptr-progress, 0) * 0.65);
}


/* Pasó la marca: se agranda un poquito ("ya puedes soltar"). */
.ufy-ptr[data-state="armed"] .ufy-ptr-badge {
  transform:
    translateY(var(--ufy-ptr-pull, 0px))
    rotate(270deg)
    scale(1.08);
}


.ufy-ptr[data-state="refreshing"] .ufy-ptr-badge {
  opacity: 1;

  transform: translateY(var(--ufy-ptr-pull, 0px));
}


.ufy-ptr-ring {
  width: 22px;
  height: 22px;

  overflow: visible;
}


.ufy-ptr-track,
.ufy-ptr-arc {
  fill: none;

  stroke-width: 2.6;
}


.ufy-ptr-track {
  stroke: rgba(23, 17, 31, 0.12);
}


.ufy-ptr-arc {
  stroke: currentColor;
  stroke-linecap: round;

  stroke-dasharray: calc(var(--ufy-ptr-progress, 0) * 75) 100;

  transform: rotate(-90deg);
  transform-origin: 12px 12px;
}


.ufy-ptr[data-state="armed"] .ufy-ptr-arc,
.ufy-ptr[data-state="refreshing"] .ufy-ptr-arc {
  stroke-dasharray: 75 100;
}


.ufy-ptr[data-state="refreshing"] .ufy-ptr-ring {
  animation: ufy-ptr-spin 800ms linear infinite;
}


/* Solo para lectores de pantalla: "Actualizando…". */
.ufy-ptr-status {
  position: absolute;

  width: 1px;
  height: 1px;

  overflow: hidden;

  clip-path: inset(50%);
  white-space: nowrap;
}


@keyframes ufy-ptr-spin {
  to {
    transform: rotate(360deg);
  }
}


/* Si el teléfono pide menos movimiento: sin giros ni deslizamientos. */
@media (prefers-reduced-motion: reduce) {
  .ufy-ptr-badge {
    transition: opacity 120ms linear;
  }

  .ufy-ptr[data-state="refreshing"] .ufy-ptr-ring {
    animation: none;
  }
}


/* iPhone: arriba del todo, Safari hace rebotar la lista él solo y ese
   rebote "pelea" con el circulito. En estas tres listas (y en la pantalla
   de la app que las lleva) se quita el rebote, solo en iPhone y iPad:
   -webkit-touch-callout solo lo conoce Safari de iPhone y iPad. */
@supports (-webkit-touch-callout: none) {
  #ufyPhoneAppContent .ufy-el-chat-app,
  #ufyPhoneAppContent .ufy-notifications,
  #ufyPhoneAppContent .ufy-dm-conversations {
    overscroll-behavior-y: none;
  }

  /* Aparte: un iPhone viejo que no conozca :has() solo se salta esta. */
  #ufyPhoneAppContent:has(.ufy-el-chat-app, .ufy-notifications, .ufy-dm-inbox) {
    overscroll-behavior-y: none;
  }
}