/* templates/loader.css */

/* Variables de color (ajusta si quieres otros) */
:root {
  --loader-bg: #F8FAFC;       /* mismo fondo que tu web */
  --loader-ring: #17B26A;     /* ejemplo en tu color primary */
  --loader-ring-light: rgba(23,178,106,0.3);
}

/* Overlay full-screen */
#page-loader {
  position: fixed;
  inset: 0;                  /* top/right/bottom/left = 0 */
  background: var(--loader-bg);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  font-family: inherit;      /* hereda la tuya */
}

/* El anillo giratorio */
#page-loader .loader-ring {
  width: 60px;
  height: 60px;
  border: 6px solid var(--loader-ring-light);
  border-top-color: var(--loader-ring);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* Animación */
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}