/* Loader global (Fase 6). Aparece al navegar entre pantallas o enviar un
   formulario, y se oculta cuando la nueva pantalla termina de cargar. El
   spinner es el que eligió el usuario. */
.page-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 22, 51, 0.62);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease;
}
.page-loader.activo {
  opacity: 1;
  visibility: visible;
}
.loader-wrap {
  position: relative;
  width: 100px;
  height: 100px;
}

/* ── Spinner proporcionado por el usuario ── */
.loader {
  --hue: 210;
  --size: 100px;
  --border: 10px;
  --speed: 1s;
  --blur: var(--border);
}
.loader {
  width: var(--border);
  aspect-ratio: 1;
  background: white;
  border-radius: 50%;
  position: absolute;
  left: 50%;   /* centra el conjunto dentro de .loader-wrap */
  --y: calc((var(--size) * -0.5) + (var(--border) * 0.5));
  transform: rotate(0deg) translateY(var(--y));
  animation: spin var(--speed) infinite linear;
}
.loader::before {
  content: "";
  position: absolute;
  inset: calc(var(--border) * -0.5);
  border-radius: 50%;
  background: white;
  filter: blur(var(--blur));
  z-index: -1;
}
.loader::after {
  content: "";
  width: var(--size);
  aspect-ratio: 1;
  position: absolute;
  top: 0%;
  left: 50%;
  translate: -50% 0;
  background: conic-gradient(
    white,
    hsl(var(--hue), 100%, 70%),
    hsl(var(--hue), 100%, 10%),
    transparent 65%
  );
  border-radius: 50%;
  mask: radial-gradient(
    transparent calc(((var(--size) * 0.5) - var(--border)) - 1px),
    white calc((var(--size) * 0.5) - var(--border))
  );
}
@keyframes spin {
  to {
    transform: rotate(-360deg) translateY(var(--y));
  }
}
@media (prefers-reduced-motion: reduce) {
  .loader { animation-duration: 2.4s; }
}